如何在React中操作api调用中的数据？

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('API_URL');
      const jsonData = await response.json();
      setData(jsonData);
    };

    fetchData();
  }, []);

  return (
    <div>
      {/* 使用data渲染组件 */}
    </div>
  );
};

export default MyComponent;

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

const MyComponent = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('API_URL');
        setData(response.data);
      } catch (error) {
        // 错误处理
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

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

  return (
    <div>
      {/* 使用data渲染组件 */}
    </div>
  );
};

export default MyComponent;

// Redux配置文件

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import axios from 'axios';

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

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA':
      return {
        ...state,
        data: action.payload,
        loading: false,
      };
    default:
      return state;
  }
};

const fetchData = () => {
  return async (dispatch) => {
    try {
      const response = await axios.get('API_URL');
      dispatch({ type: 'FETCH_DATA', payload: response.data });
    } catch (error) {
      // 错误处理
    }
  };
};

const store = createStore(reducer, applyMiddleware(thunk));

export { store, fetchData };

// 组件中的使用

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchData } from './redux/config';

const MyComponent = () => {
  const data = useSelector((state) => state.data);
  const loading = useSelector((state) => state.loading);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchData());
  }, []);

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

  return (
    <div>
      {/* 使用data渲染组件 */}
    </div>
  );
};

export default MyComponent;