茅侃侃
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); };我希望每當(dāng)我調(diào)用 fetchDataHandler 時都能夠?qū)?data1 設(shè)置為空數(shù)組?,F(xiàn)在它正在工作,因為每次我調(diào)用 fetchDataHandler 時結(jié)果都會保留。我該怎么做?
1 回答

郎朗坤
TA貢獻1921條經(jīng)驗 獲得超9個贊
問題:
在觸發(fā)新渲染之前(在函數(shù)頂部),您的異步處理程序?qū)?code>dataStruction?關(guān)閉。data1
?setData1([]);
async
發(fā)生這種情況是因為 React 狀態(tài)更新是批量且異步的。
簡單的解決方案:
如果您擺脫(刪除該行)setData1([]);
并更改setData1([...data1, { ...element1, level: 1 }]);
為setData1([{ ...element1, level: 1 }]);
,那么您將得到一個包含新元素的數(shù)組,而不保留“舊”元素。
替代解決方案:
您還可以將狀態(tài)更新包裝到如下函數(shù)中:
轉(zhuǎn)這個:setState("foo")
進入這個:setState((state, props) => "foo")
第二種形式(傳遞函數(shù)而不是直接傳遞狀態(tài))可確保引用正確的狀態(tài)。因此,在您的情況下,第二個狀態(tài)更新將引用更新后的狀態(tài)。
添加回答
舉報
0/150
提交
取消