useSelector 在调度后定义但随后未定义

Posted 2023-02-21

【中文标题】useSelector 在调度后定义但随后未定义

【英文标题】：useSelector is defined after dispatching but then undefined

【发布时间】：2022-01-24 01:55:30

【问题描述】：

我试图通过从 App.js 组件调度操作来从减速器获取初始数据，它工作正常，但是当我切换到另一个组件并使用 useSelector 加载它时，它变得未定义。 我在 Headphones.js 中尝试过这行代码，但第二行返回 undefined

const allData = useSelector((state) => state.allDataReducer);
const  loading, error, data  = allData;

App.js

const dispatch = useDispatch();
  useEffect(() => 
    dispatch(welcomeAction());
    dispatch(listAllData);
  , [dispatch]);

allDataReducer.js

import 
  LIST_ALL_DATA_FAIL,
  LIST_ALL_DATA_REQUEST,
  LIST_ALL_DATA_SUCCESS,
 from "../constants/shared";

export const allDataReducer = (state =  loading: true, data:  , action) => 
  switch (action.type) 
case LIST_ALL_DATA_REQUEST:
  return  loading: true ;
case LIST_ALL_DATA_SUCCESS:
  return  loading: false, data: action.payload ;
case LIST_ALL_DATA_FAIL:
  return  loading: false, error: action.payload ;
default:
  return state;
  
;

shared.js

import 
  LIST_ALL_DATA_FAIL,
  LIST_ALL_DATA_REQUEST,
  LIST_ALL_DATA_SUCCESS,
 from "../constants/shared";
import Axios from "axios";

export const listAllData = async (dispatch) => 
  dispatch(
    type: LIST_ALL_DATA_REQUEST,
  );
  try 
    const  data  = await Axios.get("/all");
    dispatch( type: LIST_ALL_DATA_SUCCESS, payload: data );
   catch (error) 
    dispatch( type: LIST_ALL_DATA_FAIL, payload: error.message );
  
;

Headphones.js

import React,  useEffect  from "react";
import  useDispatch, useSelector  from "react-redux";
import  listheadphones  from "../actions/headphonesActions";
import BasicSection from "../components/BasicSection";
import Definer from "../components/Definer";
import LoadingBox from "../components/LoadingBox";
import MessageBox from "../components/MessageBox";
import ProductsCategories from "../components/ProductsCategories";
import BestAudioGear from "../components/BestAudioGear";

const Headphones = (props) => 
  const dispatch = useDispatch();
  const headphonesList = useSelector((state) => state.headphonesList);

  const allData = useSelector((state) => state.allData);
        const  loading, error, data  = allData; //undefined
  //const  loading, error, headphones  = headphonesList;
  console.log(headphonesList);
  useEffect(() => 
    dispatch(listheadphones());
  , [dispatch]);
  return (
    <div>
      <Definer title="HEADPHONES" />
      loading ? (
        <LoadingBox></LoadingBox>
      ) : error ? (
        <MessageBox variant="danger">error</MessageBox>
      ) : (
        headphones.map((headphone) => (
          <BasicSection
            key=headphone.id
            name=headphone.headerName
            info=headphone.info
            mobile=headphone.mobile
            tablet=headphone.tablet
            desktop=headphone.desktop
          />
        ))
      )
      <ProductsCategories />
      <BestAudioGear />
    </div>
  );
;

export default Headphones;

Github repo

【问题讨论】：

你能说得更具体些吗？您如何在其他组件中使用它？也添加该文件中的代码。

另外一个链接最好不要加。如果链接后面有任何内容，只需将其作为代码、图像或文本添加到此处即可。

我添加了代码sn-ps

【参考方案1】：

您的描述仍然不够具体，无法真正确定问题所在。但这里有一些我注意到的东西：

dispatch(listAllData); 在我看来有点不对劲，动作创建者通常是一个被调用的函数：dispatch(listAllData());

然后在哪里定义 export const listAllData = async (dispatch) => - 如果您使用 thunk 中间件，这应该是一个返回函数的函数。你只定义了一个函数。