javascript - React中一键将事件内容存储到数组中的延迟

Question

我是 React 新手。我正在编写一段代码。我正在尝试制作一个 ToDoList 之类的东西。所以我创建了 3 个不同的组件，一个用于获取输入，另一个用于显示输入的代码以及 App.jsx。以下是每个代码。

App.jsx

    import React, { useState } from "react";
    import Header from "./Header";
    import Footer from "./Footer";
    import Note from "./Note";
    import CreateArea from "./CreateArea";

    function App() {
      const [arr, setArr] = useState([]);
      function getData(note) {
        // setArr(previous => [...previous, { title: newTitle, content: newContent }]);
        setArr(previous => {return [...previous, note];});
        console.log(arr);
      }
      return (
        <div>
          <Header />
          <CreateArea reply={getData} />
          {arr.map((arry, index) => (
                <Note
                  key={index}
                  id={index}
                  title={arry.title}
                  content={arry.content} 
                />
              ))} 
          <Footer />
        </div>
      );
    }

    export default App;

CreateArea.jsx

    import React, { useState } from "react";

    function CreateArea(props) {
      const [note, setNote] = useState({
        title: "",
        content: ""
      });

      function handleChange(event) {
        const { name, value } = event.target;

        setNote(prevNote => {
          return {
            ...prevNote,
            [name]: value
          };
        });
      }

      function submitNote(event) {
        // const newTitle = note.title;
        // const newContent = note.content;
        // props.reply(newTitle, newContent);
        props.reply(note);
        setNote({
          title: "",
          content: ""
        });
        event.preventDefault();
      }

      return (
        <div>
          <form>
            <input
              name="title"
              onChange={handleChange}
              value={note.title}
              placeholder="Title"
            />
            <textarea
              name="content"
              onChange={handleChange}
              value={note.content}
              placeholder="Take a note..."
              rows="3"
            />
            <button onClick={submitNote}>Add</button>
          </form>
        </div>
      );
    }

    export default CreateArea;

注释.jsx

    import React from "react";

    function Note(props) {
      return (
        <div className="note">
          <h1>{props.title}</h1>
          <p>{props.content}</p>
          <button>DELETE</button>
        </div>
      );
    }

    export default Note;

现在，不知何故，我得到了正确的结果，并且正在根据需要添加新帖子，但是当我为 App.jsx 中存储在 getData() 内的数组执行 console.log 时，我观察到有一个延迟在添加阵列之前单击。

Sample problem

在附加的图像中。我添加了带有随机数据的新帖子，但是当我看到控制台日志时，数组仍然是空的。当我第二次点击添加按钮时，才after second click on adding new post是正在显示的数据。我似乎无法弄清楚其背后的原因。我是否做错了什么或遗漏了什么？

Answer 1

来自 useState() 的 setArr() 是一个异步函数。因此，在状态实际更新之前调用 console.log(arr)。

但是，您可以将 arr 记录在 useEffect() Hook 中，该 Hook 在每次状态更改时都会调用，如下所示:

useEffect(() => {console.log(arr)})

您可以在 https://reactjs.org/docs/hooks-effect.html 找到有关此 Hook 的更多信息.