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 <div>Error: {error}</div>;    }    if (!data) {      return <div>Loading...</div>;    }    return (      <div>        {}      </div>    );  }}export default MyComponent;

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