即使在父状态更新后，子无状态功能组件也不会更新

Question

我的父组件在其状态中有一个名为formIsValid 的属性，最初设置为false。我的表单也有一个提交按钮。我希望在某些输入字段（名字和姓氏输入）中有数据之前禁用提交按钮。

这是我的状态：

  state = {
    employees: [],
    costEstimates: emptyCosts(),
    relationshipOptions: [],
    newEmployee: emptyEmployee(),
    formIsValid: false
  };

这个函数处理名字和姓氏输入的变化：

  // handle input into "First Name" and "Last Name" inputs
  handleChangeValue = async e => {
    const newEmployee = { ...this.state.newEmployee };
    newEmployee[e.currentTarget.name] = e.currentTarget.value;

    this.setState({ newEmployee });

    this.validateIfCanBeSubmitted();

    await this.updateCostsData(newEmployee); // this is an api thing, not relevent
  };

这是在状态中设置formIsValid 属性的原因。此属性作为道具发送到提交按钮。

  validateIfCanBeSubmitted = () => {
    const { firstName, lastName } = this.state.newEmployee;

    let formIsValid = firstName && lastName ? true : false;

    this.setState({ formIsValid });
  };

如果该州的员工属性的名字和姓氏为空，则该提交按钮正确地被禁用。问题是它“被 1 次更新关闭”。就好像道具没有被传播到子按钮组件，直到下一次状态改变之后。这是问题的 GIF：

这是子组件的样子。它只是一个普通的 HTML 按钮，但它位于无状态功能组件中，因此问题不在于组件的状态：

    <button
      type="button"
      onClick={onSubmit}
      className={'btn btn-primary mr-1 ' + (formIsValid ? '' : 'disabled')}
      disabled={!formIsValid}
    >

Answer 1

setState() 是异步的！
this.validateIfCanBeSubmitted(); 在旧状态上执行；执行您的函数时，此更新 this.setState({ newEmployee }); 尚未传播到 this.state。

将validateIfCanBeSubmitted 设为更新函数。

validateIfCanBeSubmitted = ({ newEmployee: { firstName, lastName }}) => {
  return {
    formIsValid: firstName && lastName ? true : false
  };
}

并相应地使用它：

handleChangeValue = async e => {
  const {name, value} = e.currentTarget;
  const newEmployee = { 
    ...this.state.newEmployee, 
    [name]: value
  };

  this.setState({ newEmployee });
  this.setState(this.validateIfCanBeSubmitted);

  // this is an api thing, not relevant
  await this.updateCostsData(newEmployee); 
};

实际上，handleChangeValue 中的代码也应该在这样的函数中，因为它使用以前的状态来计算新的状态。

那么如何组合它们：

handleChangeValue = e => {
  const {name, value} = e.currentTarget;
  this.setState((state) => {
    const newEmployee = { 
      ...this.state.newEmployee, 
      [name]: value
    };
    const { firstName, lastName } = newEmployee;
    const formIsValid = firstName && lastName ? true : false;

    //and since you never use the returned Promise, why make anything async?
    this.updateCostsData(newEmployee);

    return { newEmployee, formIsValid  };
  });
};