React循环发送指令并接收回复 - 完整示例与解析

您可以使用useEffect钩子和状态来实现循环发送指令的功能。下面是一个使用React来写的示例：

import React, { useState, useEffect } from 'react';

const App = () => {
  const [instructions, setInstructions] = useState(['00', '05', '12', '13']);
  const [currentInstructionIndex, setCurrentInstructionIndex] = useState(0);

  useEffect(() => {
    const sendInstruction = async () => {
      // 模拟发送指令并等待回复
      await new Promise(resolve => setTimeout(resolve, 1000)); // 假设1秒后收到回复

      // 发送下一条指令
      setCurrentInstructionIndex(prevIndex => prevIndex + 1);
    };

    if (currentInstructionIndex < instructions.length) {
      sendInstruction();
    }
  }, [currentInstructionIndex, instructions]);

  useEffect(() => {
    if (currentInstructionIndex === instructions.length) {
      // 所有指令已发送完成，重新开始循环
      setCurrentInstructionIndex(0);
    }
  }, [currentInstructionIndex, instructions]);

  return (
    <div>
      <h1>指令发送器</h1>
      <p>当前指令：{instructions[currentInstructionIndex]}</p>
    </div>
  );
};

export default App;

在上述示例中，我们使用useState钩子来定义状态变量instructions和currentInstructionIndex。instructions存储要发送的指令数组，currentInstructionIndex表示当前发送的指令索引。

然后，我们使用两个useEffect钩子来实现指令的循环发送。第一个useEffect钩子监听currentInstructionIndex和instructions的变化，并在当前指令发送完成后发送下一条指令。这里使用了setTimeout来模拟发送指令并等待回复的过程。当所有指令发送完成后，第二个useEffect钩子将重新将currentInstructionIndex设置为0，实现循环发送的功能。

最后，我们在组件中显示当前发送的指令。您可以根据需要进行进一步的处理和界面设计。