类型错误：无法读取未定义的属性“类型” - Redux

Question

大家，早安。 我正在通过课程学习如何在 React 中使用 Redux，但是在开发一个简单的示例时，我遇到了一个错误，我不明白它来自哪里。

当我点击我的按钮时会发生这种情况，这就是屏幕填充该错误的地方，想法是从 API 获取 pokemon 列表并将它们保存在一个常量中，如您所见。

这是我使用名为 pokeDuck.js 的 Ducks 方法声明 Reduces、Actions 和 Constants 的组件

import axios from "axios";


//constantes
//Declaramos nuestro estado y nuestras acciones todo esto en constantes


const dataInicial = [{array:[]}];
const OBTENER_POKEMONES = "OBTENER_POKEMONES";





//............................................................................................................




//reduce
//Revulve la accion especificada sto es solo una function a exportar
export default function pokeReduce(state = dataInicial,action){

        switch(action.type) {
            case OBTENER_POKEMONES:
            return {...state, array:[action.payload]}
          
        
            default:
                return state;
               
        }

}



//............................................................................................................



//acciones
//Mostrar,modificar,borrar esas son las acciones en si que tambien son funciones o contsante de tipo funcion

export function ObtenerPokemones(){

    //dispatch: Activamos al reduce
    //getState: Obtenemos la data inicial la constante de arriba
    return async function (dispatch,getState){

        try {

     
            const res = await axios.get("https://pokeapi.co/api/v2/pokemon?offset=0&limit=20");

            dispatch({

                type:OBTENER_POKEMONES,
                payload: res.data.results
            })

            
        } catch (error) {
            
            console.log("Hubo un problema: "+error)
        }


    }


}

这是 store.js

我所做的就是导出我的减少并返回它们

import {createStore,combineReducers,applyMiddleware} from "redux";
import thunk from "redux-thunk";
import pokeReduce from "./pokeDuck";


//COMBINAMOS EL REDUCES CON EL METODO combineReciders todas nuestras reduce las combinamos haca con un nombre relacionado
const rootReduce = combineReducers({

    pokemones: pokeReduce

});




export default function generarStore(){


 const store = createStore(rootReduce,applyMiddleware(thunk));
 return store;
 

}

我制作了我的React组件，它只是一个调用 pokeDuck.js 操作的简单按钮

import React, { Fragment } from 'react';
import {useDispatch,useSelector} from "react-redux"
import ObtenerPokemones from "../redux/pokeDuck"
//UseDispatch: nos va a servir para consumir nuestra accion del patico
//useSelector: nos va a servir para leer el estado o array

const Pokemones = () =>{

    const dispacth = useDispatch();

    return(

        <Fragment>
        <h2>Pokemones</h2>

        <button onClick={()=>{dispacth(ObtenerPokemones())}}>Obtener Pokemones</button>
        </Fragment>
    )


}

export default Pokemones;

最后我将它导入到我的应用程序中，该应用程序显示了 App.js 的所有内容

import './App.css';
import Pokemones from './components/pokemones';

import {Provider} from "react-redux"
import generarStore from "./redux/store";

function App() {

 const store = generarStore();

  return (
    <Provider store={store}>

    <Pokemones/>

    </Provider>
  );
}

export default App;

Answer 1

出现此问题是因为您在减速器中设置了 2D 数组。 就是这样：

从 API 成功检索响应后，您正在分派您的操作，如下所示：

dispatch({
  type:OBTENER_POKEMONES,
  payload: res.data.results // now note here that res.data.results is an array
})

在减速器中，您将action.payload用作：

case OBTENER_POKEMONES:
  return {...state, array:[action.payload]} // here array becomes [[...]] i.e. a 2D array

要解决这个问题，您可以简单地在 reducer 中使用扩展运算符，如下所示：

case OBTENER_POKEMONES:
  return {...state, array:[...action.payload]}