数组映射函数不返回更新的项目

Question

我面临一个奇怪的问题（至少对我来说），其中 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.completed

7        }

8        //console.log("ITEM.id is ",item.id,"id passed was ",id,"new status is ",item.completed)

9        return item

10      })

11      return {myTodos : todos}

12    })

13  }

在此函数中，我正在更新 App 对象的状态。就在第 8 行返回项目之前，我可以记录输出并看到 item.completed 已更改，但是当回调返回项目对象时，它不会将更新的项目存储在todos变量中。

任何提示都可能有很大帮助。感谢期待

Answer 1

您可以尝试使 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}。反过来，这会强制执行新的渲染调用。

Answer 2

请检查这个片段import React, { Component } from "react";import "./styles.css";class App extends Component {&nbsp; state = {&nbsp; &nbsp; myTodos: [&nbsp; &nbsp; &nbsp; { id: 1, title: "wake up", completed: false },&nbsp; &nbsp; &nbsp; { id: 2, title: "brush", completed: false }&nbsp; &nbsp; ]&nbsp; };&nbsp; handleChange = (id) => {&nbsp; &nbsp; this.setState((prevState) => ({&nbsp; &nbsp; &nbsp; myTodos: prevState.myTodos.map((todo) => {&nbsp; &nbsp; &nbsp; &nbsp; if (todo.id === id) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return { ...todo, completed: !todo.completed };&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return todo;&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }));&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; <h1>TODOS</h1>&nbsp; &nbsp; &nbsp; &nbsp; {this.state.myTodos.map((todo) =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; todo.completed ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <del>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p onClick={() => this.handleChange(todo.id)}>{todo.title}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </del>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p onClick={() => this.handleChange(todo.id)}>{todo.title}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}export default App;工作&nbsp;代码沙盒问题：您没有以真实状态返回该对象