对Axios响应中的数据进行排序并设置为useReducer有效负载

npm install axios

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    // 在这里处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 在这里处理错误
    console.error(error);
  });

axios.get('https://api.example.com/data')
  .then(response => {
    const sortedData = response.data.sort((a, b) => a.property - b.property);
    console.log(sortedData);
  })
  .catch(error => {
    console.error(error);
  });

import React, { useReducer, useEffect } from 'react';
import axios from 'axios';

const initialState = {
  data: [],
  loading: true,
  error: null,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_SUCCESS':
      return {
        ...state,
        data: action.payload,
        loading: false,
        error: null,
      };
    case 'FETCH_ERROR':
      return {
        ...state,
        data: [],
        loading: false,
        error: action.payload,
      };
    default:
      return state;
  }
};

const MyComponent = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => {
        const sortedData = response.data.sort((a, b) => a.property - b.property);
        dispatch({ type: 'FETCH_SUCCESS', payload: sortedData });
      })
      .catch(error => {
        dispatch({ type: 'FETCH_ERROR', payload: error });
      });
  }, []);

  if (state.loading) {
    return <div>Loading...</div>;
  }

  if (state.error) {
    return <div>Error: {state.error.message}</div>;
  }

  return (
    <ul>
      {state.data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default MyComponent;