Javascript React hook setState未按预期工作

我有以下代码：

  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时，结果都会粘住。我怎么做？

问题：

在

setData1（[]）触发新渲染之前，异步处理程序
dataStruction
覆盖
data1
（在
异步
函数的顶部）


简单解决方案：

如果去掉（删除行）
setData1（[]）和更改
setData1（[…data1，{…element1，级别：1}]）
to
setData1（[{…element1，级别：1}]）然后您将得到一个包含新元素的数组，而不保留“旧”元素

替代解决方案：

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

打开此按钮：
setState（“foo”）

进入这个：
setState（（状态，道具）=>foo”）

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

在
setData1（[]）触发新渲染之前，异步处理程序
dataStruction
覆盖
data1
（在
异步
函数的顶部）


简单解决方案：

如果去掉（删除行）
setData1（[]）和更改
setData1（[…data1，{…element1，级别：1}]）
to
setData1（[{…element1，级别：1}]）然后您将得到一个包含新元素的数组，而不保留“旧”元素

替代解决方案：

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

打开此按钮：
setState（“foo”）

进入这个：
setState（（状态，道具）=>foo”）

第二种形式（直接传递函数而不是状态）确保引用正确的状态。因此，在您的情况下，第二次状态更新将引用更新后的状态。
看起来您显示的一切都很好。为什么您认为
data1
没有改变？您是如何检查
data1
是否已更改的？您是否也可以包括设置状态的代码。全部code@ImranRafiqRather updated@BorislavStefanov一切似乎都很好。只需在axios呼叫前使用wait关键字即可。由于我们的setData1（[]）是一个异步调用，我觉得应该可以使用。@ImranRafiqRather再次显示粘贴结果…看起来您显示的一切都很好。为什么您认为
data1
没有改变？您是如何检查
data1
是否已更改的？您是否也可以包括设置状态的代码。全部code@ImranRafiqRather updated@BorislavStefanov一切似乎都很好。只需在axios呼叫前使用wait关键字即可。由于我们的setData1（[]）是一个异步调用，我觉得应该可以使用。@ImranRafiqRather再次显示结果。。。