ReactJS：第一个 useEffect 在第二个被触发之前不会更新状态

Question

我有一个聊天组件，它使用 API 填充messages状态，还有不同的区域有不同的聊天，我将它们作为道具传递给组件。

在这个组件中，我有 3 个useEffects，但我对其中两个不能正常工作的组件感兴趣。在第一个 useEffect 中，我有一些代码基本上将messages区域更改时的状态重置为undefined. 我需要这样做才能区分在我显示加载组件<Spinner />的地方尚未调用 API 还是已调用 API 并且它已检索空数组以显示<NoData>组件。

我遇到的问题是，当我更改区域时，useEffects会按应有的方式触发，但第一个useEffect不会在调用messages第二个之前将状态更新为未定义useEffect。由于历史推送而重新渲染后，消息未定义，但第二个useEffect不再被触发。我不明白为什么状态没有在useEffect第二个之前的第一个更新。同样奇怪的是，这曾经对我有用，现在却没有。我在没有推送到 git 的情况下更改了一些东西，现在我很困惑。下面的代码：

export default function ChatPage({ history, match, area, ...props }) {

  const [templates, setTemplates] = useState([]);

  const [advisors, setAdvisors] = useState([]);

  const [messages, setMessages] = useState(undefined);

  const [conversation, setConversation] = useState([]);

  const [chatToLoad, setChatToLoad] = useState(false);

  const [isOpen, setIsOpen] = useState(false);

  const [linkOrigin, setLinkOrigin] = useState("");

  const [headerText, setHeaderText] = useState("");

  // useEffect used to reset messages and conversation state

  // triggered on area change(messages and conversation reset)

  // and customer ID change(conversation reset).

  // Required to distinguish between API call not being made yet

  // and API returning no data.

  useEffect(() => {

    if (match.params.id) {

      setLinkOrigin(match.params.id);

    }

    if (messages) {

      if (match.params.id && messages.length !== 0) {

        let matches = messages.filter(

          (message) => message.ORIGINATOR === match.params.id

        );

        if (matches.length !== 0 && match.params.id === linkOrigin) {

          setMessages(undefined);

          history.push("/chats/" + match.params.area);

        }

      }

    }

    setConversation([]);

  }, [area, match.params.id]);

  // API calls

  useEffect(() => {

    if (templates.length === 0) {

      api.getTemplates().then((templates) => {

        setTemplates(templates);

      });

    }

    if (advisors.length === 0) {

      api.getAgents().then((advisors) => {

        setAdvisors(advisors);

      });

    }

Answer 1

你不能通过这种方式得到你想要的。在 useEffect 中应用的状态更改在下一个渲染周期之前不会生效，以下回调仍将看到当前的 const 值。如果您想更改当前渲染周期中的值，您唯一的选择是将您的 const 放宽为 let 并自己设置变量。毕竟：你期待一个 const 改变，不是吗？;)