将嵌套的子集对象合并到React中的深度嵌套状态

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        nested: {
          value1: 'Hello',
          value2: 'World'
        }
      }
    };
  }

  updateState = () => {
    const newData = {
      nested: {
        value2: 'Universe',
        value3: '!'
      }
    };

    this.setState(prevState => ({
      data: {
        ...prevState.data,
        nested: {
          ...prevState.data.nested,
          ...newData.nested
        }
      }
    }));
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        <button onClick={this.updateState}>Update State</button>
        <p>{data.nested.value1} {data.nested.value2} {data.nested.value3}</p>
      </div>
    );
  }
}

export default MyComponent;