第一次不通过useState挂钩更新状态

Question

状态仅在下一次击键时更新，但使用先前的状态更新。屏幕1

当您单击updateForm（）时，它也为空，仅在第二次单击后，状态才会更新。屏幕2

我了解这是由于异步引起的，但是在这种情况下，我不知道如何使用它。

Home.jsx

import React, { useState } from 'react';
import { Form } from '../components/Form/Form';

const Home = () => {
  const [dateForm, setDataForm] = useState({});

  const updateForm = eachEnry => {
    setDataForm(eachEnry);
    console.log(dateForm);
  };

  return (
    <div>
      <Form updateForm={updateForm} />
    </div>
  );
};
export default Home;

Form.jsx

import React, { useState } from 'react';
import './Form.scss';

export const Form = ({ updateForm }) => {
  const initInputState = {
    name: '',
    password: ''
  };
  const [dataForm, setDataForm] = useState(initInputState);
  const { name, password } = dataForm;

  const onChange = e => {
    setDataForm({
      ...dataForm,
      [e.target.name]: e.target.value
    });
  };

  const onSubmit = e => {
    e.preventDefault();
    updateForm(dataForm);
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="Name"
          value={name}
          onChange={onChange}
          name="name"
        />
        <input
          placeholder="Password"
          onChange={onChange}
          value={password}
          type="text"
          name="password"
        />
        <button type="submit">Login</button>
      </form>
    </div>
  );
};

Answer 1

您的代码运行正常。您只需在状态更新前执行 console.log 。使用更新状态功能时不会发生状态更新。完成所有组件操作和嵌套组件操作后，就会发生这种情况。

在另一个地方click to check

使用控制台日志检查代码

如您所见，我在每个 Home 组件重新渲染上放置了一个控制台日志。您可以检查所有项目是否正常。

P.S。我对您的代码做了一些改进。检查你是否喜欢它。并向updateForm函数添加注释。也请检查这一点。

Answer 2

您显然没有在此处正确设置状态

   setDataForm({
      ...dataForm,
      [e.target.name]: e.target.value
    });

应该是

 setDataForm(c => ({
     ...c,
     [e.target.name]: e.target.value
 }));