我不能对从 API 获取的数据进行 map

Question

我使用 Redux-Saga 从 API 获取数据，但是当它更新 state 时我无法使用它。 这可能是因为我试图在数据加载到 redux state 之前访问数据。

//saga.js

import axios from 'axios';
import { put, takeLatest, all } from 'redux-saga/effects'
const URL = "https://api.staging.gamerarena.com/disputes/";

function* fetchInfo() {
  const res = yield axios.get(URL).then((response) => response);
  yield put({
    type: 'FETCH_INFO',
    payload: res
  })
}

function* actionWatcher() {
  yield takeLatest('GET_INFO', fetchInfo)
}

export default function* rootSaga() {
  yield all([
    actionWatcher(),
  ]);
}

上面，您可以看到 GET_INFO 触发了 fetch_info，但它会在所有其他操作之后更新 state。 我试图用 useEffect 修复它，但它没有帮助，或者我没有正确使用它。

const DisputeCard = (props) => {

    const state = useSelector(state => state?.apiInfo?.apiInfo[0]?.results)
    const dispatch = useDispatch()

    useEffect(() => {

        dispatch(getInfo()) ; 
        console.log("State is ", state) // state returns undefined in the console

    }, [] );

Answer 1

是的，您无法在获取数据之前访问数据。 您可以等待数据获取或将回调 function 传递给您的操作。

使用另一个 useEffect 来等待获取数据，您可能还必须等待数据在组件内呈现。

const state = useSelector(state => state?.apiInfo?.apiInfo[0]?.results)
const dispatch = useDispatch()

useEffect(() => {

    dispatch(getInfo()) ; 

}, [] );

useEffect(() => {
    if(state) {
      console.log("State is ", state);
    }

}, [state] );

if(!state) {
 return null;
}

return (
  <div>{state}</div>
)

或将回调传递给您的操作：

export const getInfo = createAction("GET_INFO", (callback) => {
 return callback;
})

function* fetchInfo(action) {
 const callback = action.payload;
 const res = yield axios.get(URL).then((response) => response);
 callback(res)
 yield put({
  type: 'FETCH_INFO',
  payload: res
 })
 
 useEffect(() => {

  dispatch(
    getInfo((res) => {
     console.log("State is ", state) 
    })) ; 
   }, [] );
 }