【12】基础知识：React ajax

在React中，我们可以使用第三方库，如axios或fetch API来进行AJAX请求。

1. 使用axios

首先，你需要安装axios库，可以通过运行npm install axios来安装。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
 
function App() {
  const [data, setData] = useState([]);
 
  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
    .then(response => {
      setData(response.data);
    })
    .catch(error => {
      console.log('Error fetching data: ', error);
    });
  }, []);
 
  return (
    <div>
      {data.map(item => (
        <h1 key={item.id}>{item.title}</h1>
      ))}
    </div>
  );
}
 
export default App;

2. 使用fetch API

fetch是现代浏览器提供的原生API，用于获取资源（包括跨网络请求）。

import React, { useState, useEffect } from 'react';
 
function App() {
  const [data, setData] = useState([]);
 
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(data => setData(data))
    .catch(error => console.log('Error fetching data: ', error));
  }, []);
 
  return (
    <div>
      {data.map(item => (
        <h1 key={item.id}>{item.title}</h1>
      ))}
    </div>
  );
}
 
export default App;

以上两种方法都可以在React组件中发送AJAX请求，并在请求成功后更新组件的状态。你可以根据项目中对第三方库的选择和浏览器的支持情况来选择使用哪一种方法。