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

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.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变量中。任何提示都可能有很大帮助。感谢期待

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 {

  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 (

      <div className="App">

        <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;

工作 代码沙盒

问题：

1. 您没有以真实状态返回该对象