在React中与后端API进行交互的操作步骤

npx create-react-app react-api-demo
cd react-api-demo
npm start

npm install axios

import axios from 'axios';

const API_URL = 'https://jsonplaceholder.typicode.com/users'; // 示例API地址

// 获取用户列表
export const fetchUsers = async () => {
  const response = await axios.get(API_URL);
  return response.data;
};

// 创建新用户
export const createUser = async (user) => {
  const response = await axios.post(API_URL, user);
  return response.data;
};

import React, { useEffect, useState } from 'react';
import { fetchUsers, createUser } from './api';

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  // 获取用户列表
  useEffect(() => {
    const getUsers = async () => {
      try {
        const data = await fetchUsers();
        setUsers(data);
      } catch (err) {
        setError('获取用户列表失败！');
      }
    };

    getUsers();
  }, []);

  // 添加新用户
  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');

    const newUser = { name, email };

    try {
      const addedUser = await createUser(newUser);
      setUsers([...users, addedUser]);
      setName('');
      setEmail('');
    } catch (err) {
      setError('添加用户失败！');
    }
  };

  return (
    <div>
      <h1>用户列表</h1>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} - {user.email}
          </li>
        ))}
      </ul>

      <h2>添加新用户</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="用户名"
          value={name}
          onChange={(e) => setName(e.target.value)}
          required
        />
        <input
          type="email"
          placeholder="电子邮件"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <button type="submit">添加用户</button>
      </form>
    </div>
  );
};

export default UserList;

import React from 'react';
import UserList from './UserList';

function App() {
  return (
    <div className="App">
      <UserList />
    </div>
  );
}

export default App;

npm start