Question

我已经研究了一段时间，但我无法弄清楚。当我调度 populateDatasets 操作时，我可以看到我的商店在开发工具中得到了很好的更新，但是当我尝试使用 useSelector 在 React 组件中访问该状态时，它总是返回 undefined。

这是我如何配置我的商店

import { configureStore } from '@reduxjs/toolkit'
import datasetReducer from './datasets'

export default configureStore({
  reducer: {
    datasets: datasetReducer
  },
  devTools: true
})

这是我为这个状态创建的切片

import { createSlice } from '@reduxjs/toolkit'

export const datasetSlice = createSlice({
  name: 'datasets',
  initialState: [],
  reducers: {
    populateDataset: (state, action) => {
      state.push(action.payload)
    }
  }
})

export const { populateDataset } = datasetSlice.actions

export default datasetSlice.reducer

这里是我在 React 组件中发送动作的地方

const App = () => {
  const { datasets } = useSelector((state) => state.datasets)
  console.log('datasets: ' + datasets)
  const dispatch = useDispatch()

  useEffect(() => {
    csv(FantraxHQData).then(data => {
      data.map((player) => {
        player.isDrafted = false
        return player
      })
      dispatch(populateDataset(data))
    })
    
    csv(FantasyProsData).then(data => {
      data.map((player) => {
        player.isDrafted = false
        return player
      })
      dispatch(populateDataset(data))
    })
  }, [])

  return (
    <div className={styles.outter}>
      <MyTeam />
      <div className={styles.container}>
        <DataButtons />
        <DraftBoard />
      </div>
    </div>
  )
}

同样，当我分派动作时，我的商店更新得很好，但 datasets 始终未定义。任何帮助将不胜感激。

更新解决方案：解决方案是将 { datasets } 更改为 datasets

Answer 1

您的数据集是您的 redux 存储中的一个数组，但是当您将其作为对象读取时您正在使用 useSelector()。将 useSelector 行更改为 const datasets = useSelector((state) => state.datasets)。不要在数据集上使用花括号。

为什么我的 useSelector 钩子总是返回 undefined？

1 个答案: