在Reactjs状态下处理（合并）对象

Question

我正在用reactjs开发一个todo应用程序。我正在反应状态下使用对象作为标题和任务。问题是，无论何时我尝试将旧状态与新状态合并，都行不通。

请在下面检查我的代码。

const [todo, setTodo] = useState({ title: "", task: ""});

const setObj = { title: valueOfTile, task: valueOfTask};

setTodo({...todo , ...setObj});

我又如何遍历它们？这就是我要做的迭代：

{Object.keys(todo).map((data, i) => (
    <div className="main " key={data}>
      <div CLASSNAME="first">
        <h1>{todo.title}</h1>
      </div>
      <div className="second">
        <p>{todo.task}</p>
      </div>
    </div>
  ))}

我不确定为什么要为一个添加的标题和任务获得两行。查看图片

Answer 1

更改状态：

const [todo, setTodo] = useState([]);

然后，更改此

setTodo({...todo , ...setObj});

与此：

setTodo([...todo, setObj]);

您不需要在spread operator上使用setObj。当前，您正在向状态添加两个项目。这就是为什么要得到两行的原因。

对于映射，您可以执行以下操作：

{ todo.map( (data, index) => {
    // Your code
})

Answer 2

1. 您的第一个问题（更新状态）需要更多信息，请提供完整的代码。
2. Object.keys(todo)将返回["title", "task"]，因此["title", "task"].map(function())中map的函数将执行两次，结果将呈现2 <div>。