React通过Axios获取数据并且进行渲染的模板代码

前言

大家好，我是你的人类朋友🧐

公司最近要用到React做项目

所以我索性把正在做的项目的前端也用React写了

之前没学过，最近正在看一些文档慢慢学

调接口的操作是少不了的

就整理了一份模板代码

啥时候想看一眼都会比较方便✌️

代码

代码如下：

// 导入React和axios库  
import React, { useState, useEffect } from 'react';  
import axios from 'axios';  
  
// 定义App组件  
function App() {  
  // 定义state变量来存储获取的数据  
  const [data, setData] = useState(null);  
  
  // 使用useEffect钩子在组件加载时获取数据  
  useEffect(() => {  
    // 使用axios发起GET请求  
    axios.get('https://api.example.com/data')  
      .then(response => {  
        // 请求成功时，将获取的数据存储到state变量中  
        setData(response.data);  
      })  
      .catch(error => {  
        // 请求失败时，可以在这里处理错误  
        console.error(error);  
      });  
  }, []); // 空数组作为依赖项，表示只在组件加载时执行一次  
  
  // 根据数据的状态渲染不同的内容  
  return (  
    <div className="App">  
      {/* 如果数据尚未加载，显示加载提示 */}  
      {data === null ? (  
        <div>Loading...</div>  
      ) : (  
        {/* 如果数据已加载，遍历数据并渲染每个条目的内容 */}  
        <div>  
          {data.map(item => (  
            <div key={item.id}>  
              <h2>{item.title}</h2>  
              <p>{item.description}</p>  
            </div>  
          ))}  
        </div>  
      )}  
    </div>  
  );  
}  
  
// 导出App组件  
export default App;

最后

最近经常是一个问题排查半天，难搞

我发现React的官方文档写的真不错，还自带习题的，🐂🍺

下次见咯