您可以在同一个函数中多次调用同一个useState钩子吗？

Question

因此，在重构我的基于类的聊天机器人组件以使用反应钩子的过程中，我遇到了一个使用状态钩子覆盖状态中的对象的问题。这导致只有机器人响应显示在用户界面中。当我与机器人聊天时，用户界面中显示的用户输入的闪光会被聊天机器人的响应覆盖。下面是代码：

export const Chatbot = () => {
  const [messages, setMessages] = useState([]);
  const [value, setValue] = useState("");

  async function df_text_query(text) {
    let says = {
      speaks: "me",
      message: {
        text: {
          text
        }
      }
    };
    setMessages([...messages, says]);

    const res = await axios.post("/api/df_text_query", {
      text,
      userID: cookies.get("userID")
    });

    // Handles fullfillment routes for dialogflow
    res.data.fulfillmentMessages.forEach(message => {
      says = {
        speaks: "bot",
        message
      };
      setMessages([...messages, says]);
    });
  }

  const handleChange = e => {
    setValue(e.target.value);
  };

  const handleSubmit = e => {
    e.preventDefault();
    if (value !== "") {
      const message = value.split();
      df_text_query(message);
    }
    setValue("");
  };

  const handleButtonSend = async event => {
    const eventText = event.target.innerText;
    await setValue(eventText);
    const message = value.split();
    await df_text_query(message);
    await setValue("");
  };

  return (
    <div>
      <div>chatbot code here</div>
    </div>
  );
};

可以这样在同一个异步函数中写入useState两次吗？如果不是，您建议我如何重构此代码，以便消息状态返回一个交替对象数组，例如：

[{says: {
   speaks: "me",
   message: {
       text: {
          text
       }
    }
  }
},
{says: {
   speaks: "bot",
   message: {
      text: {
        text
      }
     }
   }
 },
{says: {
   speaks: "me",
   message: {
       text: {
          text
       }
    }
  }
},
{says: {
   speaks: "bot",
   message: {
      text: {
        text
      }
     }
   }
 }
]```

Any answer would be very much appreciated. I've been stuck on this problem for a while now. If you need more information I'm happy to provide!

Cheers,

Jacks

Answer 1

试着这样做：

 async function df_text_query(text) {
    let says = [{
      speaks: "me",
      message: {
        text: {
          text
        }
      }
    }];

    const res = await axios.post("/api/df_text_query", {
      text,
      userID: cookies.get("userID")
    });

    // Handles fullfillment routes for dialogflow
    let saysBatch = [says, ...res.data.fulfillmentMessages.map(message => ({
        speaks: "bot",
        message
      }))];
    setMessages([...messages, ...saysBatch]);