如何在(then)中更改setState以避免出现错误？

fetchData()
  .then(data => {
    this.setState({ data });
    this.setState({ data }); // 这行代码可能会导致问题
  });

fetchData()
  .then(data => {
    this.setState(prevState => ({ ...prevState, data }));
  });

componentDidMount() {
  fetchData()
    .then(data => {
      this.setState({ data });
    });
}

componentWillUnmount() {
  // 如果组件卸载，不应该再调用 setState
}

componentDidMount() {
  this.isMounted = true;
  fetchData()
    .then(data => {
      if (this.isMounted) {
        this.setState({ data });
      }
    });
}

componentWillUnmount() {
  this.isMounted = false;
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    fetchData()
      .then(data => {
        this.setState(prevState => ({ ...prevState, data }));
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? <p>{data}</p> : <p>Loading...</p>}
      </div>
    );
  }
}