React表单从Redux Props更新状态时无法清空输入值问题

嘿，我一眼就看到问题出在哪了——你的getDerivedStateFromProps逻辑写反了，导致你清空输入框的时候，Redux里存的旧值又被强行塞回state，所以永远删不干净！

问题根源分析 #

你当前的判断条件：

const shouldUpdate = name === prevState.name || prevState.name === '';
return shouldUpdate ? { name } : null;

这个逻辑有两个致命问题：

1. 只要用户把输入框清空（prevState.name === ''），就会触发把props里的旧name同步回state，等于直接否决了用户的清空操作
2. 每次用户输入修改state时，getDerivedStateFromProps都会被调用（因为state更新会触发这个钩子），这时候只要满足上面的条件，就会覆盖用户的输入

另外，你还混合了受控组件和非受控组件的写法：输入框同时用了value和defaultValue，这会导致不可预期的行为，受控组件只需要value即可。

解决方案 #

我们需要重构状态同步逻辑，让组件只有在Redux里的props真正发生变化时（比如从其他步骤修改了StepOne的数据）才同步到state，用户在当前步骤的编辑操作不受干扰。

方案一：修正getDerivedStateFromProps逻辑（推荐）

我们在state里保存一份props的快照，用来判断props是否真的更新了，而不是每次state变化都触发同步：

class StepOne extends Component {
  static getDerivedStateFromProps = (nextProps, prevState) => {
    // 对比当前props和之前保存的props快照，判断是否需要同步
    const propsChanged = JSON.stringify(nextProps.stepOne) !== JSON.stringify(prevState.prevPropsSnapshot);
    
    if (propsChanged) {
      // 如果props更新了，同步到state，并更新快照
      return {
        ...nextProps.stepOne,
        prevPropsSnapshot: nextProps.stepOne
      };
    }
    
    // 否则不修改state，保留用户的编辑
    return null;
  };

  state = {
    // 初始化state为props的值，同时保存props快照
    ...this.props.stepOne,
    prevPropsSnapshot: this.props.stepOne
  };

  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleNext = (e) => {
    e.preventDefault();
    const { name, description, location } = this.state;
    this.props.setStepOne({ name, location, description });
  };

  render() {
    return (
      <Col xs={{ size: 8, offset: 2 }}>
        <Col xs='12' className='margin-bottom-60'>
          <label className='header-label' htmlFor='name'> Name </label>
          {/* 去掉defaultValue，只用受控的value */}
          <input 
            className='form-input' 
            placeholder='Whats the conference name?' 
            id='name' 
            name='name' 
            value={this.state.name} 
            onChange={this.handleChange} 
          />
        </Col>
        <Col xs='12' className='margin-bottom-60'>
          <label className='header-label' htmlFor='location'> Location </label>
          <input 
            className='form-input' 
            placeholder='Where is the conference located?' 
            id='location' 
            name='location' 
            value={this.state.location} 
            onChange={this.handleChange} 
          />
        </Col>
        <Col xs='12' className='margin-bottom-60'>
          <label className='header-label' htmlFor='description'> Description </label>
          <input 
            className='form-input' 
            placeholder='Tell us something more about the conference...' 
            type='textarea' 
            id='description' 
            name='description' 
            value={this.state.description} 
            onChange={this.handleChange} 
          />
        </Col>
        <div style={{ width: '100%', position: 'fixed', bottom: '0px', zIndex: '100', textAlign: 'center', padding: '10px', left: '0px' }} >
          <NextButton handleClick={this.handleNext} />
        </div>
      </Col>
    );
  }
}

方案二：完全受控组件（更简洁）

如果你的表单逻辑允许，也可以把组件改成完全受控，直接用props的值作为输入框的value，修改时直接调用Redux的action更新props，这样就不需要维护组件内部state了：

class StepOne extends Component {
  handleChange = (e) => {
    // 直接更新Redux里的状态
    const { name, value } = e.target;
    this.props.setStepOne({
      ...this.props.stepOne,
      [name]: value
    });
  };

  handleNext = (e) => {
    e.preventDefault();
    // 这里可以做验证逻辑，然后跳转到下一步
  };

  render() {
    const { stepOne } = this.props;
    return (
      <Col xs={{ size: 8, offset: 2 }}>
        <Col xs='12' className='margin-bottom-60'>
          <label className='header-label' htmlFor='name'> Name </label>
          <input 
            className='form-input' 
            placeholder='Whats the conference name?' 
            id='name' 
            name='name' 
            value={stepOne.name} 
            onChange={this.handleChange} 
          />
        </Col>
        {/* 其他输入框同理 */}
        <div style={{ width: '100%', position: 'fixed', bottom: '0px', zIndex: '100', textAlign: 'center', padding: '10px', left: '0px' }} >
          <NextButton handleClick={this.handleNext} />
        </div>
      </Col>
    );
  }
}

这种方式更简洁，不需要处理组件内部state和props的同步问题，所有状态都由Redux管理，适合逻辑不复杂的多步骤表单。

为什么这样能解决问题？ #

• 方案一中，我们只在Redux的props真正变化时才同步到组件state，用户的编辑操作不会触发props同步，所以清空输入框时不会被旧值覆盖
• 方案二中，输入框完全由Redux的props控制，用户修改直接更新Redux状态，自然不会有旧值回显的问题

内容的提问来源于stack exchange，提问作者Tarang Hirani