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

Posted 2023-03-16

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

【英文标题】：Basic issue with ReactJS setting state in functional component

【发布时间】：2021-09-21 18:53:12

【问题描述】：

您好，我是 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 方法是，如果这不起作用尝试其他方法，但我正在尝试真正了解发生了什么。

感谢您的回复。

【问题讨论】：

您的表单是否提交并导致页面重新加载？

嗨，克里斯法默，感谢您的回复！如果我删除 e.preventDefault();页面会重新加载。我想我在对此感到头疼时将其删除，但问题实际上是当我使用 onSubmit 调用函数时关键 itemText 未定义但是当我在 textarea 上使用 onChange 调用函数时关键 itemText 不为空。感谢您的意见！

【参考方案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

【讨论】：

您好罗伯特·特雷尔，谢谢您的回答。我之前实际上有 e.preventDefault() ，但我想我在打破这个问题时把它删除了。基本上使用 e.preventDefault() 我确实有一个状态设置为对象的对象，但是当我使用 onSubmit 调用该函数时键 itemText 未定义但是当我在 textarea 上使用 onChange 调用该函数时键 itemText 不为空.这就是让我困惑的地方。我非常感谢您的反馈！你看起来很有学问。