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

【问题标题】：Why does my useSelector hook always return undefined?为什么我的 useSelector 钩子总是返回 undefined？
【发布时间】：2021-07-28 03:55:24
【问题描述】：

我已经有一段时间了，我无法弄清楚。当我发送 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

【问题讨论】：

数据集的初始状态是一个数组，但您使用的是对象解构语法。试试const datasets = useSelector((state) => state.datasets)

标签： reactjs redux react-redux redux-toolkit

【解决方案1】：

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

【讨论】：

就是这样。谢谢