如何在react组件中呈现状态数组。该数组处于可用状态，但在呈现其显示时未定义

constructor(props) {
  super(props);
  this.state = {
    data: [] // 初始化一个空数组
  };
}

componentDidMount() {
  // 调用API获取数据
  fetchData()
    .then(data => {
      this.setState({ data: data }); // 更新状态数组
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}

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

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}