React-hook setState 未按预期工作

Question

我有以下代码：  const classes = useStyles();  const [data1, setData1] = useState([]);  const [searchedString, setSearchString] = useState("");  console.log(data1);  const fetchDataHandler = async () => {    setData1([]);    axios      .get(`http://localhost:5000/select?articul=${searchedString}`)      .then((response) => {        dataStruction(response.data);      })      .catch((err) => {        console.log(err);      });  };  const dataStruction = (data) => {    data.map((element1) => {      if (element1.secondaryArt.startsWith("30")) {        return setData1([...data1, { ...element1, level: 1 }]);      }    });  };  const onChangeSearchText = (event) => {    setSearchString(event.target.value);  };我希望每当我调用 fetchDataHandler 时都能够将 data1 设置为空数组。现在它正在工作，因为每次我调用 fetchDataHandler 时结果都会保留。我该怎么做？

Answer 1

问题：

在触发新渲染之前（在函数顶部），您的异步处理程序将dataStruction 关闭。data1 setData1([]);async

发生这种情况是因为 React 状态更新是批量且异步的。

简单的解决方案：

如果您摆脱（删除该行）setData1([]);并更改setData1([...data1, { ...element1, level: 1 }]);为setData1([{ ...element1, level: 1 }]);，那么您将得到一个包含新元素的数组，而不保留“旧”元素。

替代解决方案：

您还可以将状态更新包装到如下函数中：

转这个：setState("foo")

进入这个：setState((state, props) => "foo")

第二种形式（传递函数而不是直接传递状态）可确保引用正确的状态。因此，在您的情况下，第二个状态更新将引用更新后的状态。