为啥反应把我的状态变成[对象对象]

Posted 2023-02-22

【中文标题】为啥反应把我的状态变成[对象对象]

【英文标题】：Why does react turn my state into [object object]为什么反应把我的状态变成[对象对象]

【发布时间】：2020-11-07 18:05:52

【问题描述】：

我有这个简单的组件：

这里是 CodeSandbox：https://codesandbox.io/s/fast-architecture-fgvwg?fontsize=14&hidenavigation=1&theme=dark

function Home() 
  const [name, setName] = useState('');

  const handleSubmit = (e) => 
    e.preventDefault();
    console.log(name);
  ;

  return (
    <>
      <form onSubmit=handleSubmit>
        <input
          value=name
          onChange=setName
          type="text"
          placeholder="name"
        />
        <button type="submit">
          submit
        </button>
      </form>
    </>
  );


export default Home;

只要我点击输入框，它就会变成[object object]，我很想知道为什么会这样。

【参考方案1】：

您的 onChange 处理程序接收到一个 change event 对象。如果您想要新值，则需要从事件中获取它：event.target.value:

<input
  value=name
  onChange=e => setName(e.target.value)
  type="text"
  placeholder="name"
/>

当您将值转换为字符串时，例如在调用console.log 时，会调用该值的toString 方法，对于对象，该方法默认返回[object Object]。

【参考方案2】：

您没有将值传递给您的name 变量onChange。 onChange 返回 event 您必须从中获取值并以这种方式设置名称。

import React,  useState  from "react";
import "./styles.css";

export default function App() 
  const [name, setName] = useState("");

  const handleSubmit = e => 
    e.preventDefault();
    console.log(name);
  ;

  return (
    <>
      <form onSubmit=handleSubmit>
        <input value=name onChange=(e) => setName(e.currentTarget.value) type="text" placeholder="name" />
        <button type="submit">submit</button>
      </form>
    </>
  );

这里的更新是onChange 属性。您正在获取事件 e 并将名称设置为 currentTarget 值。

onChange =  (e) => setName(e.currentTarget.value) 

【讨论】：

谢谢，这让我发疯了，因为我在另一个项目中使用过它，它实际上工作正常，我想知道为什么。

【参考方案3】：

您已将 onChange 设置为 setName。 setname是一个用来更新name值的函数。

您需要编写一个函数来处理用户键入名称时正在更新的名称值。设置onChange等于那个函数：

import React,  useState  from "react";
import "./styles.css";

export default function App() 
  const [name, setName] = useState("");

  const handleSubmit = e => 
    e.preventDefault();
    console.log(name);
  ;

  function handleChange(e) 
    e.preventDefault();
    setName(e.target.value);
  

  return (
    <>
      <form onSubmit=handleSubmit>
        <input
          value=name
          onChange=handleChange
          type="text"
          placeholder="name"
        />
        <button type="submit">submit</button>
      </form>
    </>
  );

【讨论】：

复制粘贴错误。你的handleChange 有一个阻止默认值:)