为什么反应将我的状态变成 [object object]

Question

我有这个简单的组件：

在 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]，我很想知道为什么会这样。

Answer 1

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

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

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

Answer 2

您没有将值传递给 name 变量 onChange。 onChange returns 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) }

Answer 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>
    </>
  );
}

为什么反应将我的状态变成 [object object]

Why does react turn my state into [object object]

state

object

reactjs

use-state