reactjs - ¿Cómo puedo resolver mi TypeError de gancho de reacción: setUser no es un problema de función?

CorePress2024-01-24  10

Estoy haciendo sólo cosas básicas. Tengo un campo de entrada y un botón dentro de la etiqueta del formulario. usando el gancho useState para configurar el nombre de usuario de entrada. El navegador me da error: - TypeError: setUser no es una función y falla en la línea no. 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;


------------------------------------

usaste llaves en lugar de corchetes. simplemente cambia tu código a

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

y debería ejecutarse.



------------------------------------

useState returnns una matriz, no un objeto.

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



------------------------------------

intenta usar onChange={ e => setUser(e.target.value)} o definió una función

ejemplo:

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

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



------------------------------------

Pruebe esto, tiene un problema con la forma en que declaró useState con {} y no con [].

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;

Su guía para un futuro mejor - libreflare
Su guía para un futuro mejor - libreflare