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")第二种形式（传递函数而不是直接传递状态）可确保引用正确的状态。因此，在您的情况下，第二个状态更新将引用更新后的状态。