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

问题描述

嗨，我是 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,[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 的方法是，如果这不起作用，请尝试其他方法，但我正在尝试真正了解正在发生的事情。

感谢您的回复。

解决方法

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

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