1 回答

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊
當(dāng)您的組件被包裹在<React.StrictMode>
.?如果您使用 Create React App 創(chuàng)建您的應(yīng)用程序,這是默認(rèn)完成的,請(qǐng)?jiān)谀?code>index.js文件中檢查它。
StrictMode 是一種開發(fā)功能,可強(qiáng)制您編寫更好的代碼。它只影響您的開發(fā)構(gòu)建,因此如果在生產(chǎn)模式下構(gòu)建和運(yùn)行,您的代碼應(yīng)該可以正常工作。
StrictMode 做的一件事是運(yùn)行你的setState
方法兩次,以確保你不依賴它只運(yùn)行一次。因此,它第一次運(yùn)行時(shí),您會(huì)按預(yù)期反轉(zhuǎn) todo.completed ,而在第二次運(yùn)行時(shí),它會(huì)將其恢復(fù)為原始值。
這告訴你的是你的handleChange
函數(shù)實(shí)際上是用一個(gè)不純的方法更新狀態(tài),因?yàn)槟銓?shí)際上改變了todo
你的prevState.todos.map
.
您需要做的是返回一個(gè)新todo
對(duì)象,該對(duì)象將是另一個(gè)對(duì)象的副本,僅completed
修改了屬性,如下所示:
handleChange(id) {
? this.setState(prevState => {
? ? const updatedTodos = prevState.todos.map(todo => {
? ? ? return {
? ? ? ? id: todo.id,
? ? ? ? task: todo.task,
? ? ? ? completed: todo.id === id ? !todo.completed : todo.completed
? ? ? };
? ? });
? ? return {
? ? ?todos: updatedTodos
? ? };
? });
}
或者使用ES6 spread operator,如下所示:
handleChange(id) {
? this.setState(prevState => (
? ? {
? ? ? todos: prevState.todos.map(todo => (
? ? ? ? {...todo, completed: todo.id === id ? !todo.completed : todo.completed}
? ? ? ))
? ? }
? ));
}
我相信這是比 Chris G 建議刪除 <React.StrictMode> 更好的解決方案,因?yàn)?StrictMode 實(shí)際上可以幫助您編寫更好的代碼。
添加回答
舉報(bào)