首頁猿問數組映射函數不返回更新的項目

數組映射函數不返回更新的項目

JavaScript

萬千封印 2023-10-14 16:13:22

我面臨一個奇怪的問題（至少對我來說），其中 JS Array 方法map()沒有按照映射回調邏輯返回更新的數組。我有以下功能1 handleChange (id){2 this.setState((prevState)=>{3 const todos = prevState.myTodos.map(item => {4 if(item.id === id){5 //console.log("ITEM.id is ",item.id,"id passed is ",id,"status is ",item.completed)6 item.completed = !item.completed7 }8 //console.log("ITEM.id is ",item.id,"id passed was ",id,"new status is ",item.completed)9 return item10 })11 return {myTodos : todos}12 })13 }在此函數中，我正在更新 App 對象的狀態。就在第 8 行返回項目之前，我可以記錄輸出并看到 item.completed 已更改，但是當回調返回項目對象時，它不會將更新的項目存儲在todos變量中。任何提示都可能有很大幫助。感謝期待

查看完整描述

2 回答

慕雪6442864

TA貢獻1812條經驗獲得超5個贊

您可以嘗試使 if 條件內聯，這樣您就不會使用return. 就像是：

handleChange (id){

this.setState((prevState)=>{

const todos = prevState.myTodos.map(item =>

(item.id === id) ? {...item, completed: !item.completed} : item )

})

}

編輯：此解決方案有效，因為它使用擴展語法返回一個新的 JS 對象{...item, completed: !item.completed}。反過來，這會強制執行新的渲染調用。

反對回復 2023-10-14

呼如林

TA貢獻1798條經驗獲得超3個贊

請檢查這個片段

import React, { Component } from "react";

import "./styles.css";

class App extends Component {

state = {

myTodos: [

{ id: 1, title: "wake up", completed: false },

{ id: 2, title: "brush", completed: false }

]

};

handleChange = (id) => {

this.setState((prevState) => ({

myTodos: prevState.myTodos.map((todo) => {

if (todo.id === id) {

return { ...todo, completed: !todo.completed };

}

return todo;

})

}));

};

render() {

return (

<h1>TODOS</h1>

{this.state.myTodos.map((todo) =>

todo.completed ? (

<del>

<p onClick={() => this.handleChange(todo.id)}>{todo.title}</p>

</del>

) : (

<p onClick={() => this.handleChange(todo.id)}>{todo.title}</p>

)

)}

</div>

);

}

export default App;

工作代碼沙盒

問題：

您沒有以真實狀態返回該對象

反對回復 2023-10-14

2 回答
0 關注
130 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

數組映射函數不返回更新的項目

數組映射函數不返回更新的項目

2 回答

添加回答