首页 > 解决方案 > 在反应中将 API 数据存储到状态变量

问题描述

import React,{useState, useEffect} from 'react';
import {useSelector, useDispatch} from "react-redux";
import * as actions from '../../../../core/actions';

function Earnings(props) {
    //state hooks
    // setEarnings will be use when we get data from API.
    const [earnings,setEarnings] = useState([]);
    const dispatch = useDispatch();

    //reducers.
    // initail state is empty object {}
    const earningsForSessionState = useSelector((state) => state.getEarningsReducer);
    
    useEffect(() => {
      console.log('111111111111 first use effect is running');
      let data = {
        "transaction_type":"multiple"
      }
       // calling API for getting data as an array.
        dispatch(actions.getEarnings(data));
    }, []);


    useEffect(()=>{
      console.log('2222222222 second use effect is running');
      console.log('', earningsForSessionState.payload?.success?.data?.data);
      //setEarnings(earningsForSessionState.payload?.success?.data?.data);
    }, [earningsForSessionState?.payload]);
}

我能够在从 API 获得的第二个 useEffect 中打印数据。
但我想将该数据存储到我的状态变量earnings中。如您所见,我setEarnings在第二个 useEffect 函数中注释了函数。但是如果我取消注释该行,那么我没有得到任何数据。我认为我以错误的方式使用 useEffect。setEarnings请告诉我,如果在第二个 useEffect 中取消注释功能,为什么我无法获取数据。
我想将 API 数据存储到我的状态变量earnings中。我该怎么做呢 ?

标签: reactjs

解决方案


推荐阅读