在componentWillUnmount()阶段触发Dispatch action以获取子表单组件值是否为良好方案？

这绝对不是一个好的实现方案，甚至根本达不到你想要的效果——原因很简单：componentWillUnmount() 这个生命周期钩子只有在组件即将被卸载销毁的时候才会触发，而你点击Button的时候，FormPart1组件明明还在页面上，完全没有要卸载的迹象，所以这个dispatch操作根本不会执行，自然拿不到表单值。

接下来给你几种靠谱的实现方式，你可以根据项目情况选择：

1. 受控组件模式（最推荐） #

让Parent组件维护FormPart1的表单状态，通过props把值和更新方法传递给FormPart1，这样Parent随时能拿到最新的表单值，点击Button时直接使用即可。

示例代码：

// Parent组件
class Parent extends React.Component {
  state = {
    formPart1Value: ''
  };

  handleInputChange = (value) => {
    this.setState({ formPart1Value: value });
  };

  handleButtonClick = () => {
    // 这里直接拿到FormPart1的值
    console.log('FormPart1的值:', this.state.formPart1Value);
    // 执行你的dispatch操作
    // dispatch({ type: 'SAVE_FORM_VALUE', payload: this.state.formPart1Value });
  };

  render() {
    return (
      <div>
        <FormPart1 
          value={this.state.formPart1Value}
          onChange={this.handleInputChange}
        />
        <FormPart2 />
        <button onClick={this.handleButtonClick}>提交</button>
      </div>
    );
  }
}

// FormPart1组件
class FormPart1 extends React.Component {
  handleChange = (e) => {
    this.props.onChange(e.target.value);
  };

  render() {
    return (
      <input 
        type="text" 
        value={this.props.value}
        onChange={this.handleChange}
      />
    );
  }
}

2. 非受控组件+Ref #

如果不想用受控组件，你可以在Parent中给FormPart1添加Ref，点击Button时通过Ref直接获取表单的当前值。

示例代码：

// Parent组件
class Parent extends React.Component {
  formPart1Ref = React.createRef();

  handleButtonClick = () => {
    // 通过ref获取FormPart1的输入值
    const formValue = this.formPart1Ref.current.input.value;
    console.log('FormPart1的值:', formValue);
    // 执行dispatch操作
    // dispatch({ type: 'SAVE_FORM_VALUE', payload: formValue });
  };

  render() {
    return (
      <div>
        <FormPart1 ref={this.formPart1Ref} />
        <FormPart2 />
        <button onClick={this.handleButtonClick}>提交</button>
      </div>
    );
  }
}

// FormPart1组件
class FormPart1 extends React.Component {
  render() {
    return (
      <input type="text" ref={el => this.input = el} />
    );
  }
}

3. 全局状态管理（如Redux） #

如果你的项目已经在用Redux这类状态管理库，可以让FormPart1在输入时就dispatch更新全局状态，点击Button时Parent直接从store中取出对应的值即可。

示例代码片段：

// FormPart1组件中的输入事件处理
handleInputChange = (e) => {
  const value = e.target.value;
  // 实时更新全局状态
  this.props.dispatch({ type: 'UPDATE_FORM_PART1', payload: value });
};

// Parent组件中点击Button的处理
handleButtonClick = () => {
  // 从store中获取值
  const formValue = this.props.formPart1Value;
  console.log('FormPart1的值:', formValue);
  // 后续的提交逻辑
};

总结一下：componentWillUnmount()的触发时机和你的需求完全不匹配，一定要选择符合场景的方案，上面三种方式都是React生态中常见且可靠的实现方式。

内容的提问来源于stack exchange，提问作者Souvik Banerjee