如何在react中正确修改json？

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      jsonData: {
        name: 'John',
        age: 25,
      },
    };
  }

  updateJsonData = () => {
    const { jsonData } = this.state;
    const updatedJsonData = { ...jsonData, age: 30 };
    this.setState({ jsonData: updatedJsonData });
  };

  render() {
    const { jsonData } = this.state;
    return (
      <div>
        <button onClick={this.updateJsonData}>Update JSON</button>
        <p>Name: {jsonData.name}</p>
        <p>Age: {jsonData.age}</p>
      </div>
    );
  }
}

export default MyComponent;

import React, { Component } from 'react';
import { produce } from 'immer';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      jsonData: {
        name: 'John',
        age: 25,
      },
    };
  }

  updateJsonData = () => {
    this.setState(
      produce((draft) => {
        draft.jsonData.age = 30;
      })
    );
  };

  render() {
    const { jsonData } = this.state;
    return (
      <div>
        <button onClick={this.updateJsonData}>Update JSON</button>
        <p>Name: {jsonData.name}</p>
        <p>Age: {jsonData.age}</p>
      </div>
    );
  }
}

export default MyComponent;