ReactJS 在功能组件中设置状态的基本问题

Question

您好，我是 React 的新手，我只是无法理解一些基本的东西。

其中之一如下。

为什么在 textarea 元素上使用 onChange 调用函数时 itemData 的状态会发生变化，如本例所示：

    import React, { useEffect, useState } from "react";
function Createitem() {
  const [itemData, setitemData] = useState([]);
  const handleitemData = (e) => {
    setitemData({
      itemTime: Date.now(),
      itemText: e.target.value,
    });
  };
  useEffect(() => {
    console.log("item", itemData);
  }, [itemData]);
  return (
    <div className="itemBox">
      <div>
        <form>
          <textarea
            onChange={handleitemData}
            placeholder="What you have in mind ..."
          ></textarea>
          <button type="submit">item</button>
        </form>
      </div>
    </div>
  );
}
export default Createitem;

但在这个例子中，在表单元素上使用 onSubmit 调用函数时不是这样：

    import React, { useEffect, useState } from "react";
function Createitem() {
  const [itemData, setitemData] = useState([]);
  const handleitemData = (e) => {
    setitemData({
      itemTime: Date.now(),
      itemText: e.target.value,
    });
  };
  useEffect(() => {
    console.log("item", itemData);
  }, [itemData]);
  return (
    <div className="itemBox">
      <div>
        <form onSubmit={handleitemData}>
          <textarea placeholder="What you have in mind ..."></textarea>
          <button type="submit">item</button>
        </form>
      </div>
    </div>
  );
}
export default Createitem;

我知道 React 方法是，如果这不起作用尝试其他方法，但我正在尝试真正了解发生了什么。

感谢您的回复。

Answer 1

您必须阻止浏览器在提交时的默认行为：

import React, { useEffect, useState } from "react";
function Createitem() {
  const [itemData, setitemData] = useState([]);
  const handleitemData = (e) => {
//The line below is necessary
    e.preventDefault() 
    setitemData({
      itemTime: Date.now(),
      itemText: e.target.value,
    });
  };
  useEffect(() => {
    console.log("item", itemData);
  }, [itemData]);
  return (
    <div className="itemBox">
      <div>
        <form onSubmit={handleitemData}>
          <textarea placeholder="What you have in mind ..."></textarea>
          <button type="submit">item</button>
        </form>
      </div>
    </div>
  );
}
export default Createitem;

附件是一个沙箱，可以看到它的实际运行情况https://codesandbox.io/s/infallible-lederberg-3oj1w?file=/src/App.js:0-630