React :如何在我的JSX中使用API调用的结果？(作用域问题)

import React, { Component } from 'react';

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

  componentDidMount() {
    // 在组件挂载后发起API调用
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // 将API调用结果保存到组件状态中
        this.setState({ apiResult: data });
      });
  }

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

    if (!apiResult) {
      return <div>Loading...</div>;
    }

    return (
      <div>
        {/* 在JSX中使用API调用结果 */}
        <p>API调用结果: {apiResult}</p>
      </div>
    );
  }
}

export default MyComponent;

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [apiResult, setApiResult] = useState(null);

  useEffect(() => {
    // 在组件挂载后发起API调用
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // 将API调用结果保存到组件状态中
        setApiResult(data);
      });
  }, []);

  if (!apiResult) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {/* 在JSX中使用API调用结果 */}
      <p>API调用结果: {apiResult}</p>
    </div>
  );
}

export default MyComponent;