javascript - 使用 Hook 通过对象控制表单字段

Question

我想创建一个表单来编辑使用配置文件。该表单呈现来自 user 对象的数据。我想使用 React 的 useState Hook 来保存表单的状态，并且我想使用 onChange 函数来保留单个对象来跟踪表单的更改，该函数处理整个用户对象的更改。为什么这不起作用？

function Profile() {

  const [user, setUser] = useState({});
  const [errors, setErrors] = useState({});

  useEffect(() => {
    axios.get(`/api/v1/users/me`)
      .then(res => setUser(res.data.user))
  }, [])

  const onChange = e => {
    user[e.target.name] = e.target.value;
    setUser(user)
  }

  return (
    < div >
      <form onSubmit={null}>
        <div className="form-group">
          <label htmlFor={user.name}>Name</label>
          <input type="text" name="name"
            className={`form-control form-control-lg ${errors.name ? 'is-invalid' : ''}`}
            onChange={onChange} placeholder="Fred Flintstone" value={user.name || ''}
          />
        </div>
        <div className="form-group">
          <label htmlFor="email">Email</label>
          <input type="email" name="email"
            className={`form-control form-control-lg ${errors.email ? 'is-invalid' : ''}`}
            onChange={onChange} placeholder="fred.flintstone@aol.com" value={user.email || ''}
          />
        </div>
        <div className="form-group">
          <label htmlFor="username">Username</label>
          <input type="text" name="username"
            className={`form-control form-control-lg ${errors.username ? 'is-invalid' : ''}`}
            onChange={onChange} placeholder="yabadabadu" value={user.username || ''}
          />
        </div>
      </form>
      <div>
        <button type="button" className="btn btn-light btn-sm float-right" onClick={() => console.log("Logout")}>Logout</button>
      </div>
    </div >
  )
}

Answer 1

您正在就地修改用户对象。当您调用 setUser(user) 时，表单不会重新呈现，因为用户对象的标识尚未更改。

你所在的地方:

  const onChange = e => {
    user[e.target.name] = e.target.value;
    setUser(user)
  }

您想要的是:

  const onChange = useCallback((event) => {
    const {name, value} = event.target;
    setUser(oldUser => {
      return {
        ...user,
        [name]: value,
      };
    });
  }, [setUser]);

根据一般经验，您通常不想在 React 中就地修改状态对象。