亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React-hook setState 未按預期工作

React-hook setState 未按預期工作

茅侃侃 2023-08-05 21:09:12
我有以下代碼:  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 設置為空數組?,F在它正在工作,因為每次我調用 fetchDataHandler 時結果都會保留。我該怎么做?
查看完整描述

1 回答

?
郎朗坤

TA貢獻1921條經驗 獲得超9個贊

問題:

在觸發新渲染之前(在函數頂部),您的異步處理程序將dataStruction?關閉。data1?setData1([]);async

發生這種情況是因為 React 狀態更新是批量且異步的。

簡單的解決方案:

如果您擺脫(刪除該行)setData1([]);并更改setData1([...data1, { ...element1, level: 1 }]);setData1([{ ...element1, level: 1 }]);,那么您將得到一個包含新元素的數組,而不保留“舊”元素。

替代解決方案:

您還可以將狀態更新包裝到如下函數中:

轉這個:setState("foo")

進入這個:setState((state, props) => "foo")

第二種形式(傳遞函數而不是直接傳遞狀態)可確保引用正確的狀態。因此,在您的情況下,第二個狀態更新將引用更新后的狀態。


查看完整回答
反對 回復 2023-08-05
  • 1 回答
  • 0 關注
  • 99 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號