react如何调用接口获取数据

在 React 中，可以通过使用 fetch 或者 axios 等库来调用接口获取数据。

使用 fetch 的示例代码如下：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 处理获取到的数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

使用 axios 的示例代码如下：

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    // 处理获取到的数据
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

在实际开发中，通常会将数据获取的逻辑放在 React 组件的生命周期方法（如 componentDidMount）中，以便在组件挂载后立即获取数据。获取到的数据可以存储在组件的状态中，然后在 render 方法中使用。

例如：

import React, { Component } from 'react';
import axios from 'axios';

class MyComponent extends Component {
  state = {
    data: null,
    error: null,
  };

  componentDidMount() {
    axios.get('https://api.example.com/data')
      .then(response => {
        // 更新组件状态
        this.setState({ data: response.data });
      })
      .catch(error => {
        // 更新组件状态
        this.setState({ error: error.message });
      });
  }

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

    if (error) {
      return 
Error: {error};
    }

    if (!data) {
      return 
Loading...;
    }

    return (
      

        {/* 使用获取到的数据渲染组件 */}
      
    );
  }
}

export default MyComponent;

在上述代码中，组件在挂载后会调用 componentDidMount 方法，该方法中使用 axios 发起请求并将获取到的数据存储在组件的状态中。在 render 方法中根据组件的状态来渲染不同的内容。