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

Question

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

当我点击我的按钮时就会发生这种情况，屏幕上会出现错误，我们的想法是从API获取一个pokemon列表，并将它们保存在常量中，正如你所看到的那样。

这是我使用名为pokeDuck.js 的Ducks方法声明Reduce、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)
}

}

}

这是商店.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

这个问题是因为您在reducer中设置了一个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]}