javascript - 映射对象数组返回未定义

Question

在 React 应用程序中，我尝试将数组中每个对象的 id 字段增加 +1。

function App() {
  const[todos, setTodos] = useState([
    {
      id: 1,
      title: 'Take out the trash',
      completed: false
    },
    {
      id: 2,
      title: 'Dinner',
      completed: false
    },
    {
      id: 3,
      title: 'Meeting with boss',
      completed: false
    }
  ]);

  function onClick(){
    setTodos(todos => todos.map(todo => todo.id = todo.id + 1))
  }

  return (
    <div className="App">
      <div className="todo-list">
        <ul>
          {todos.map(todo => <li>{todo.id},{todo.title},{String(todo.completed)}</li>)}
        </ul>
        <button onClick={()=>onClick()}
        >Update
        </button>
      </div>
    </div>
  );
} 

在页面的初始呈现上，对象列表正确显示。第一次单击按钮时，它们会更改为:

,,undefined
,,undefined
,,undefined

第三次点击此错误:

TypeError: Cannot create property 'id' on number '2'

我是否错过了有关 map 功能的某些内容？

Answer 1

function onClick(){
  setTodos(todos => todos.map(todo => todo.id = todo.id + 1))
 }

您将从 map 函数返回 todo.id，因此您将 todos 设置为 ids [2, 3, 4] 数组。然后，当您尝试访问todo.id时，它是未定义，因为number.id未定义`。

您还可以通过说 todo.id = ... 来改变状态。如果您发现自己在设置状态时使用赋值运算符 (=)，则您可能做错了什么。你永远不应该有 state = ...。

你想做这样的事情:

function onClick(){
  setTodos(prev => prev.map(t => ({ ...t, id: t.id + 1 })))
 }

当您创建隐藏变量名称时，我还将 todos 重命名为 prev。