Question

在这部分代码上，我试图将新项目添加到我的待办事项列表中，但是它不起作用，我无法理解为什么。有人可以告诉我为什么这部分代码的结果吗？写的是空数组吗？

import React, { useState } from "react";

function AddNote() {
  const [item, setItem] = useState("");
  const [input, setInput] = useState("");

  const inputArray = [];

  function saveInput(event) {
    setInput(event.target.value);
  }

  function addNewItem() {
    setItem(itemName);
    inputArray.push(item);
    setInput("");
  }

  return (
    <div className="container">
      <div className="heading">
        <h1>To-Do List</h1>
      </div>
      <div className="form">
        <input onChange={saveInput} type="text" value={input} />
        <button onClick={addNewItem}>
          <span>Add</span>
        </button>
      </div>
      <div>
        <ul>
          {inputArray.map(toDOItem => {
            return <li>{toDOItem}</li>;
          })}
        </ul>
      </div>
    </div>
  );
}

export default AddNote;

Answer 1

由于功能组件只是在每次状态更改时运行的函数，并且inputArray变量在每次React重新呈现您的函数时都被声明，因此它永远不会改变。

您的组件首次呈现，并且inputArray被定义并设置为[]。已定义addNewItem函数并将其绑定到onClick的{{1}}事件。
单击<button>，调用先前定义的<button>，其中包含对addNewItem的引用（这是一个闭包）。这个inputArray调用了两个状态设置函数，提示React将该组件的另外两个渲染排队。
React第一次使用新的addNewItem值重新呈现组件。定义了itemName变量，以及新的inputArray函数。步骤1完全重复。
React使用新的addNewItem值再次重新渲染组件。与上面的＃1和＃3一样，定义了一个新的input，依此类推。

Answer 2

inputArray也需要存储在状态中；默认情况下，它不会在渲染器中持久保存：

function AddNote() {
  const [item, setItem] = useState("");
  const [input, setInput] = useState("");
  const [inputArray, setInputArray] = useState([]);

  function saveInput(event) {
    setInput(event.target.value);
  }

  function addNewItem() {
    setItem(itemName);
    setInputArray(arr => [...arr, item]);
    setInput("");
  }

  ...
}

Answer 3

您可以从addditem中删除setItem并将该setItem（输入）添加到saveInput中。

将新项目添加到“待办事项列表”反应应用程序中的问题

3 个答案: