Question

我只做基本的事情。我在表单标签中有一个输入字段和一个按钮包装。使用 useState 钩子设置输入用户名。
浏览器给我错误：- TypeError: setUser is not a function 和错误行号。 21.

  18 |   type="text"
  19 |   placeholder="nick name"
  20 |   value={user}  
> 21 |   onChange={ e => { setUser(e.target.value) } }
     | ^  22 | />
  23 | <button type="submit" onClick={StartQuiz}>
  24 |   Start the Quiz

import React, { useContext, useState } from "react";
import { QuizContext } from "../Helpers/Context";

function MainMenu() {
  const { user, setUser } = useState("");
  const { setGame } = useContext(QuizContext);

  const StartQuiz = (event) => {
    event.preventDefault();
    setGame("quiz");
    setUser("");
  };

  return (
    <div className="Menu">
      <form>
        <input
          type="text"
          placeholder="nick name"
          value={user}  
          onChange={ e => { setUser(e.target.value) } }
        />
        <button type="submit" onClick={StartQuiz}>
          Start the Quiz
        </button>
      </form>
    </div>
  );
}

export default MainMenu;

Answer 1

您使用了大括号而不是方括号。只需将您的代码更改为

const [ user, setUser ] = useState("");

它应该运行。

Answer 2

useState 返回一个数组，而不是一个对象。

// this is wrong
//const { user, setUser } = useState("");
// this is correct
const [ user, setUser ] = useState("");

Answer 3

试试这个，你对如何用 {} 而不是 [] 声明 useState 有问题。

import React, { useContext, useState } from "react";
import { QuizContext } from "../Helpers/Context";

function MainMenu() {
  const [user, setUser] = useState("");
  const { setGame } = useContext(QuizContext);

  const StartQuiz = (event) => {
    event.preventDefault();
    setGame("quiz");
    setUser("");
  };

  return (
    <div className="Menu">
      <form>
        <input
          type="text"
          placeholder="nick name"
          value={user}  
          onChange={(e) => setUser(e.target.value)}
        />
        <button type="submit" onClick={StartQuiz}>
          Start the Quiz
        </button>
      </form>
    </div>
  );
}

export default MainMenu;

Answer 4

尝试使用 onChange={ e => setUser(e.target.value)} 或定义一个函数

示例：

const handleChange = (e) => {
         const {value, name} = e.target;
         setUser(value)
      }

 <input
          type="text"
          placeholder="nick name"
          value={user}  
          onChange={ handleChange } }
        />

如何解决我的 react hook TypeError: setUser is not a function 问题？

4 个答案: