阅读量:0
在 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 方法中根据组件的状态来渲染不同的内容。
