React组件中修改state对象属性时如何保留原有值？

核心问题 #

1. 组件状态隔离：你应该是复用了BlockInput组件渲染4个输入框，但每个BlockInput实例都维护独立的state.data。也就是说，width输入框的组件只管理自己的width状态，length输入框的组件只管理自己的length状态，二者状态完全独立，自然无法互相保留值。
2. setState异步性导致日志误导：调用setState后立刻打印this.state.data，此时state还未完成更新，打印的是旧值，容易让你误以为状态合并逻辑有问题，但实际上合并本身是正确的，只是日志时机不对。

修复方案：状态提升到父组件 #

把4个字段的统一状态放到父组件中管理，BlockInput作为受控组件，只负责接收值和传递变化事件：

父组件实现

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        width: 0,
        length: 0,
        thickness: 0,
        height: 0
      }
    };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(fieldName, value) {
    // 使用函数式更新，确保基于最新state修改
    this.setState(prevState => ({
      data: {
        ...prevState.data,
        [fieldName]: value
      }
    }), () => {
      // 在setState回调中打印，获取最新state
      console.log(this.state.data);
    });
  }

  render() {
    return (
      <div>
        <BlockInput 
          id="width" 
          value={this.state.data.width} 
          onChange={(val) => this.handleInputChange("width", val)} 
        />
        <BlockInput 
          id="length" 
          value={this.state.data.length} 
          onChange={(val) => this.handleInputChange("length", val)} 
        />
        <BlockInput 
          id="thickness" 
          value={this.state.data.thickness} 
          onChange={(val) => this.handleInputChange("thickness", val)} 
        />
        <BlockInput 
          id="height" 
          value={this.state.data.height} 
          onChange={(val) => this.handleInputChange("height", val)} 
        />
      </div>
    );
  }
}

修改后的BlockInput组件

class BlockInput extends Component {
  handleChange = (event) => {
    this.props.onChange(event.target.value);
  };

  render() {
    const { id, value, className } = this.props;
    return (
      <Input 
        type="text" 
        onChange={this.handleChange} 
        name={id} 
        value={value} 
        autocomplete="off" 
        placeholder="0 см" 
      />
    );
  }
}

关键优化说明 #

• 受控组件：给Input绑定value属性，确保输入框的值始终和父组件的state同步，避免输入值不受控。
• 函数式setState：使用prevState参数获取最新状态，防止异步更新时的状态快照过期，保证状态合并的准确性。
• 正确的日志时机：在setState的回调函数中打印state，确保拿到的是更新后的最新状态。

内容的提问来源于stack exchange，提问作者Евгений