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

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;

我不知道如何让用户离开数据并进入 useStateValue。如果我将“用户：data.naam”替换为“用户：“吉米””，它可以工作，但我想从数据对象中设置名称。

Answer 1

submitUser 是 onClick 的回调，所以 submitUser = (data) => dispatch({ ... 中的 data 是 click event，它不会保存您的值正在寻找，

在 onSubmit 中调用它：

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

    submitUser(data);
  };

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

I want to set the user name from a form in my react project with react context state management but it stays undefined

javascript

forms

reactjs

react-context

react-hook-form