Question

我的 reactJS 组件中的 React-redux 状态未定义错误

2020-07-31

600

reactjs redux

这是我的初始状态：

 export const initialState = {
  currencieList: [],
  currentPage: 1,
  pageCount: 1,
  itemsPerPage: 20,
};

这是我的 redux-saga，我想用它来触发一个动作：

  function* loadDataAsync() {
  console.log("SAGAS WORKS");
  yield delay(5000);
  try {
    const {body: data} = yield call(agent.get, "https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest?CMC_PRO_API_KEY=xxx");
    getCurrencies({currencies : data.data});
    console.log('--------getCurrencies', getCurrencies);
    setPageCount();
    yield put({type:"LOAD_DATA_ASYNC"});
  } catch (err) {
    console.log(err)
    yield put({type:"LOAD_DATA_ASYNC_ERROR"})
  }
}

export function* watchLoadDataAsync() {
  yield takeLatest("LOAD_DATA", loadDataAsync);
}

Getcurrencies 减速器：

 export const getCurrencies = (currencies) => {
  return {
    type: actionTypes.LOAD_DATA_ASYNC,
    payload : currencies,
  };
};



 case actionTypes.LOAD_DATA_ASYNC:
  return {
    ...state,
    currencieList: action.currencies,
  };

这是我在组件中调用 getcurrencies 的方式：

     componentDidMount() {
    const { getCurrencies} = this.props.actions
    setInterval(() => {
      getCurrencies();
    }, 30000);
  }

问题 ---------

问题是每当 componentDidMount 执行 getcurrencies 时。我收到错误 无法切片 .... 未定义

const { currencieList, currentPage, itemsPerPage } = this.props;
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = currencieList.slice(indexOfFirstItem, indexOfLastItem);

我 console.log-ed currencieList 并且在渲染之前它是空数组，它应该是，但渲染后它变为未定义，我不知道为什么。我还检查了我的 redux-saga 中是否正确获取了数据，结果是正确的。我检索的数据不是未定义的有什么建议吗？

Answer 1

在 ComponentDidMount 中像这样写入：

componentDidMount() {
const { getCurrencies} = this.props.actions
setInterval(() => {
  getCurrencies([]);
}, 30000);

} 然后在你的 saga 中像这样写入：

 yield put(getCurrencies(data.data);

然后在 Reducer 中写入：

case actionTypes.LOAD_DATA_ASYNC:
  return {
    ...state,
    currencieList: action.payload,
  };