时间戳

首页 > 解决方案 > 将对象附加到数组中，为什么“推”不起作用？

reactjs - 将对象附加到数组中，为什么“推”不起作用？

问题描述

我只是想了解为什么第 33 行不起作用（标出），但第 32 行确实起作用。为什么我不能简单地将对象推送到数组？这两行（第 32 行和第 33 行）不应该做同样的事情吗？

参考： https ://codesandbox.io/s/lingering-wood-33vtb?file=/src/App.js:0-927

import React, { useState } from "react";

function ThingsToDo({ thing }) {
  return <div>{thing.text}</div>;
}

function ToDoForm({ add }) {
  const [value, setValue] = useState("");

  const updateKey = (e) => {
    e.preventDefault();
    if (!value) return;
    add(value);
    setValue("");
  };

  return (
    <form onSubmit={updateKey}>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </form>
  );
}

function App() {
  const [todos, setTodos] = useState([{ text: "Hi" }, { text: "Bye" }]);

  const Addtolist = (text) => {
    const newToDo = [...todos, { text }];
    //     const newToDo = todos.push({text})
    setTodos(newToDo);
  };

  return (
    <div>
      {todos.map((todo, index) => (
        <div>
          <ThingsToDo thing={todo} />
        </div>
      ))}
      <ToDoForm add={Addtolist} />
    </div>
  );
}

export default App;

标签： reactjsreact-hooks

解决方案

你不能直接在反应中改变状态。在您的 2 种情况下：

    const newToDo = [...todos, { text }];

这个创建了 todos 数组的副本并添加了您的额外项目。newTodo 是一个副本，然后当您 setTodos(newTodo) 时，您将状态设置为新复制的数组。

 const newToDo = todos.push({text})

这个尝试将 {text} 推送到作为一种状态的 todos 中。你不能直接改变一个状态，你必须通过 setTodos() 来做到这一点。

如果你真的打算使用推送，那么你可以先复制 todos 的状态，然后再推送到复制的数组中，但我认为这是额外的不必要的工作。

推荐阅读