React中如何保证state更新完成后再执行后续函数

问题根本原因 #

React 中 useState 返回的更新函数（此处为setList）是异步批量执行的，调用setList后不会立刻修改当前作用域下的list变量，而是会把更新任务加入队列，等当前同步代码全部执行完成后再统一更新state、触发组件重渲染，所以你在setList之后直接调用handleList，拿到的永远是更新前的旧list值。

可行解决方案 #

方案1：直接传递新构造的数组给handleList（最简便） #

你在addToList中已经拼接得到了最新的数组newDataList，不需要等state更新完成，直接把这个新数组作为参数传给handleList使用即可，修改后代码如下：

import { useState } from "react";
import axios from "axios";
import { AutoComplete } from "antd";

export default function Form() {
  const [list, setList] = useState([]);

  const addToList = (name) => {
    let newDataList = list.concat(name);
    setList(newDataList);
    console.log("最新List: ", newDataList);
    // 直接传入最新数组调用handleList
    handleList(newDataList);
  };

  // 接收参数使用最新数组发请求
  const handleList = async (targetList) => {
    console.log("Handle List Triggered");
    await axios
      .put("", targetList)
      .get("https://api.publicapis.org/entries")
      .then((response) => {
        console.log("Response: ", response);
      })
      .catch((error) => {});
  };

  return (
    <AutoComplete
      name="list"
      label="Add to List"
      onChange={(events, values) => {
        addToList(values.title);
      }}
    />
  );
}

方案2：用useEffect监听list变化触发执行 #

如果业务逻辑要求必须等state更新完成后再执行handleList，可以用useEffect监听list的变化，只要list更新就自动触发handleList：

import { useState, useEffect } from "react";
import axios from "axios";
import { AutoComplete } from "antd";

export default function Form() {
  const [list, setList] = useState([]);

  const addToList = (name) => {
    let newDataList = list.concat(name);
    setList(newDataList);
  };

  const handleList = async () => {
    console.log("Handle List Triggered，当前list是最新值: ", list);
    await axios
      .put("", list)
      .get("https://api.publicapis.org/entries")
      .then((response) => {
        console.log("Response: ", response);
      })
      .catch((error) => {});
  };

  // 监听list变化，state更新完成后自动执行handleList
  useEffect(() => {
    // 避免初始化时空数组执行请求可加判断：if(list.length > 0)
    handleList();
  }, [list]);

  return (
    <AutoComplete
      name="list"
      label="Add to List"
      onChange={(events, values) => {
        addToList(values.title);
      }}
    />
  );
}

内容的提问来源于stack exchange，提问作者May