如果状态更新，则在反应钩子中提交按钮后不会重新渲染

Question

单击按钮后，将验证字段并将错误分配给状态变量。

但是，当状态在 onSubmitClick 中更新时，渲染/视图不会刷新以显示错误。

我已经通过记录错误字段来交叉检查TextField组件，但错误似乎没有显示。

import React, { useState } from "react";
const Register = () => {
  const [user, setUser] = useState({
    name: "",
    email: "",
    password: "",
  });
  const setData = (type) => e => {
    user[type] = e.target.value;
    setUser(user);
  };
  const onSubmitClick = e => {
    // Check if fields are empty
    if (!user.name) {
      user.nameError = "Name field cannot be left blank !!";
    }
    if (!user.email) {
      user.emailError = "Email field cannot be left blank !!";
    }
    if (!user.password) {
      user.passwordError = "Password field cannot be left blank !!";
    }
    // Setting the error here
    setUser(user);
  };
  return (
    <div>
      <TextField value={user.name} error={user.nameError} label="Name" onChange={setData("name")} />
      <TextField value={user.email} error={user.emailError} label="Email" onChange={setData("email")} />
      <TextField value={user.password} error={user.passwordError} abel="Password" onChange={setData("password")} />
      <Button content="REGISTER" onClick={onSubmitClick} />
    </div>
  );
};
export default Register;

所以基本上在提交时，如果字段有错误，我需要显示错误。

Answer 1

您正在改变user state对象并使用相同的对象引用设置state，这就是组件不re-rendering的原因 在更新状态之前，始终从当前state构造新对象是一种很好的做法。

const setData = (type) => e => {
  setUser(prevState => ({
    ...prevState,
    [type]: e.target.value,
  }));
};
const onSubmitClick = e => {
  // destruct the current state and make a new object of it
  // now we can mutate it and assign it to state
  const updatedState = { ...user };
  // Check if fields are empty
  if (!updatedState.name) {
    updatedState.nameError = "Name field cannot be left blank !!";
  }
  if (!updatedState.email) {
    updatedState.emailError = "Email field cannot be left blank !!";
  }
  if (!updatedState.password) {
    updatedState.passwordError = "Password field cannot be left blank !!";
  }
  setUser(updatedState);
};

Answer 2

我不

明白为什么你需要发送额外的类型，你可以简单地通过从输入框中获取名称来做到这一点。在您的情况下，您没有在 setData 中设置正确的状态，即它不会改变用户数据。你可以这样做：在您的情况下，您可以这样做：

    setUser({...user,user[type] : e.target.value}); // ensure rest value will remain there and update existing value

import React, { useState } from "react";
import { render } from 'react-dom';

const Register = () => {
  const [user, setUser] = useState({
    name: "",
    email: "",
    password: "",
  });
  const setData =  e => {
    console.log(e.target.name)
    console.log(user)
    setUser({...user,[e.target.name] : e.target.value});
  };
  const onSubmitClick = e => {
    // Check if fields are empty
    if (!user.name) {
      user.nameError = "Name field cannot be left blank !!";
    }
    if (!user.email) {
      user.emailError = "Email field cannot be left blank !!";
    }
    if (!user.password) {
      user.passwordError = "Password field cannot be left blank !!";
    }
  console.log(user)
    // Setting the error here
    setUser(user);
  };
  return (
    <div>
      <input value={user.name} error={user.nameError} name="name" label="Name" onChange={(e) => setData(e)} />
      <input value={user.email} error={user.emailError} name="email" label="Email" onChange={(e) => setData(e)} />
      <input value={user.password} error={user.passwordError} name="password" label="Password" onChange={(e) => setData(e)} />
      <button content="REGISTER" onClick={onSubmitClick} >Submit</button>
    </div>
  );
};
export default Register;

render(<Register />, document.getElementById('root'));

这是工作链接：https://stackblitz.com/edit/react-fbuzph

Answer 3

您正在对引用中的同一state对象进行更新，而不是完全创建新状态。React 仅通过接收新 props 或新的状态对象来重新渲染您的组件。

请参阅下面的沙盒和代码，了解如何在提交：https://codesandbox.io/s/blissful-river-ou4o0 上添加和清除错误

注册.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import TextField from "./TextField";
import "./styles.css";
const Register = () => {
  const [user, setUser] = useState({
    name: "",
    email: "",
    password: ""
  });
  const setData = e => {
    const updatedUser = { ...user };
    updatedUser[e.target.name] = e.target.value;
    setUser(updatedUser);
  };
  const onSubmitClick = e => {
    // Check if fields are empty
    const updatedUser = { ...user };
    updatedUser.nameError = !updatedUser.name
      ? "Name field cannot be left blank !!"
      : "";
    updatedUser.emailError = !updatedUser.email
      ? "Email field cannot be left blank !!"
      : "";
    updatedUser.passwordError = !updatedUser.password
      ? "Password field cannot be left blank !!"
      : "";
    setUser(updatedUser);
  };
  return (
    <div>
      <TextField
        value={user.name}
        error={user.nameError}
        name="name"
        label="Name"
        onChange={setData}
      />
      <TextField
        value={user.email}
        error={user.emailError}
        name="email"
        label="Email"
        onChange={setData}
      />
      <TextField
        value={user.password}
        error={user.passwordError}
        name="password"
        label="Password"
        onChange={setData}
      />
      <button content="REGISTER" onClick={onSubmitClick}>
        Submit
      </button>
    </div>
  );
};
export default Register;
const rootElement = document.getElementById("root");
ReactDOM.render(<Register />, rootElement);

文本字段.js

import React from "react";
const TextField = props => {
  return (
    <div>
      <label>{props.label}</label>
      <input value={props.value} name={props.name} onChange={props.onChange} />
      {props.error ? <p>{props.error}</p> : null}
    </div>
  );
};
export default TextField;