react怎么拿到异步数据并更新页面

在 React 中拿到异步数据并更新页面通常有两种方式：

1.使用 Class 组件和 componentDidMount() 方法

在 componentDidMount() 方法中，我们可以使用异步请求获取数据。一旦数据准备好，我们可以使用 this.setState() 方法更新组件的状态。一旦状态更新，React 会自动重新渲染组件并更新页面。

示例代码如下：

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

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      });
  }

  render() {
    if (!this.state.data) {
      return <div>Loading...</div>;
    }
    return <div>{this.state.data}</div>;
  }
}

2.使用函数式组件和 useEffect() 钩子

在函数式组件中，我们可以使用 useEffect() 钩子来处理异步请求。useEffect() 接收一个函数作为参数，在这个函数中进行异步请求。一旦数据准备好，我们可以使用 useState() 钩子来更新组件的状态。一旦状态更新，React 会自动重新渲染组件并更新页面。

示例代码如下：

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        setData(data);
      });
  }, []);

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

以上两种方式都可以拿到异步数据并更新页面。具体使用哪种方式取决于你的个人喜好和项目需求。