第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

如何在 React 中向待辦事項(xiàng)應(yīng)用程序添加 handlechange?

如何在 React 中向待辦事項(xiàng)應(yīng)用程序添加 handlechange?

拉莫斯之舞 2023-03-18 15:01:20
我是新來的反應(yīng)和制作待辦事項(xiàng)應(yīng)用程序。我添加了一個(gè)事件偵聽器 (handleChange) 來翻轉(zhuǎn) todosData.completed 從 true 到 false,反之亦然,從而允許用戶選中和取消選中該復(fù)選框。我該如何糾正這個(gè)問題。這是我的代碼: class App extends React.Component {  constructor() {    super();    this.state = {      todos: todosData    }    this.handleChange = this.handleChange.bind(this);  }  handleChange(id) {    this.setState(prevState => {      const updatedTodos = prevState.todos.map(todo => {        if (todo.id === id) {          todo.completed = !todo.completed;        }        return todo;      });      return {       todos : updatedTodos      };    });  }  render() {    const todoItems = this.state.todos.map(item => (      <TodoItem        key={item.id}        item={item}        handleChange={this.handleChange}/>    ));    return(      <div>{todoItems}</div>    );  }}export default App;function TodoItem(props) {  return (    <div>      <input         type = 'checkbox' checked = {props.item.completed}        onChange = {() => props.handleChange(props.item.id)} />      <p> {props.item.task} </p>    </div>  );}export default TodoItem;有人能告訴我我錯(cuò)過了什么嗎?
查看完整描述

1 回答

?
慕田峪7331174

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í)際上可以幫助您編寫更好的代碼。


查看完整回答
反對(duì) 回復(fù) 2023-03-18
  • 1 回答
  • 0 關(guān)注
  • 143 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)