更新子组件数组中的状态对象

// 假设有一个名为ParentComponent的父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      components: [
        { id: 1, name: 'Component 1', status: 'active' },
        { id: 2, name: 'Component 2', status: 'inactive' },
        { id: 3, name: 'Component 3', status: 'active' }
      ]
    };
  }

  updateComponentStatus = (componentId, newStatus) => {
    const { components } = this.state;

    // 找到要更新的子组件的索引位置
    const componentIndex = components.findIndex(component => component.id === componentId);

    if (componentIndex !== -1) {
      // 创建一个新的状态对象，并更新需要修改的属性
      const updatedComponent = { ...components[componentIndex], status: newStatus };

      // 创建一个新的数组，并将原始数组复制到新数组中
      const updatedComponents = [...components];

      // 将要更新的子组件的状态对象替换为新的状态对象
      updatedComponents[componentIndex] = updatedComponent;

      // 更新组件的状态，触发重新渲染
      this.setState({ components: updatedComponents });
    }
  }

  render() {
    const { components } = this.state;

    return (
      <div>
        {components.map(component => (
          <ChildComponent
            key={component.id}
            name={component.name}
            status={component.status}
            onUpdateStatus={this.updateComponentStatus}
          />
        ))}
      </div>
    );
  }
}

// 假设有一个名为ChildComponent的子组件
class ChildComponent extends React.Component {
  handleButtonClick = () => {
    const { id, onUpdateStatus } = this.props;

    // 调用父组件传递的回调函数来更新状态对象
    onUpdateStatus(id, 'updated status');
  }

  render() {
    const { name, status } = this.props;

    return (
      <div>
        <h3>{name}</h3>
        <p>Status: {status}</p>
        <button onClick={this.handleButtonClick}>Update Status</button>
      </div>
    );
  }
}