我想使用反应上下文状态管理从我的反应项目中的表单设置用户名，但它保持未定义

Question

import React from "react";
import { useForm } from "react-hook-form";
import "./Home.css";
import { useStateValue } from "./StateProvider";

function Home() {
  const { register, handleSubmit } = useForm();
  const [{ user }, dispatch] = useStateValue();

  const onSubmit = (data) => {
    console.log(data);
    console.log(user);
  };

  const submitUser = (data) => dispatch({ type: "SET_USER", user: data.naam });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="home">
        <h1>Fill in your contact details.</h1>
        <div className="home_userInput">
          <div className="row">
            <div className="col-25">
              <label>name</label>
            </div>
            <div className="col-75">
              <input name="naam" type="text" ref={register}></input>
            </div>
          </div>
          <div className="row">
            <button onClick={submitUser}>Submit</button>
          </div>
        </div>
      </div>
    </form>
  );
}

export default Home;

I dont know how to get the user out from data and into userStateValue. If I substitute "user: data.naam" to "user: "Jimmy"" it works but I want to set the name from the data object.

Answer 1

submitUser is the callback of the onClick , so data in submitUser = (data) => dispatch({ ... is the click event and it won't hold the values you're looking for,

Call it inside the onSubmit instead :

const onSubmit = (data) => {
    console.log(data);
    console.log(user);

    submitUser(data);
  };