主页 / 问题 / 1103302
Accepted
Volodumr
Asked:2020-03-31 18:38:32 +0000 UTC2020-03-31 18:38:32 +0000 UTC

如何将接收到的对象写入 Redux 中的数组

  • 772

我有一个正在迭代的 API，我需要将接收到的对象写入一个数组以便稍后对其进行排序，但我不能将所有对象写入数组，只写入最后一个。但是我得到了最后一个写入这个状态的对象

我在其中迭代 API 的操作

import {ADD_POKEMONS} from "./actionTypes";

export function getPokemons(listEachPokemon){
    return{
        type: ADD_POKEMONS,
        listEachPokemon
    }
}

export function fetchPokemons(url){
    return (dispatch) =>{
        fetch(url)
            .then((response) => {
                return response.json();
            })
            .then((listPokemons)=>{
            listPokemons.results.forEach((aboutPokemon) => {
                let aboutPokemonUrl = aboutPokemon.url;
                fetch(aboutPokemonUrl)
                .then((response) => {
                    return response.json();
                })
                .then((listEachPokemon) => {
                    dispatch(getPokemons(listEachPokemon))
                })
             })
            })
    }
}

减速器

import { ADD_POKEMONS } from "../Action/actionTypes";

const initialState ={
    pokemonList: []
}

export default function listPokemons(state = initialState, action){
    switch(action.type){
        case ADD_POKEMONS:
            return{
                ...state, pokemonList: action.listEachPokemon
            }
        default:
            return state
    }
}

谢谢

reactjs

2 个回答

  1. Best Answer

    reducer 中存在冲突代码，它不会将每个新值存储在数组中，而是简单地覆盖它。这是代码：

    return { ...state, pokemonList: action.listEachPokemon }

    要将元素添加到数组而不导致突变，您可以使用Spread 语法推入数组（基于现有数组创建一个新数组而不更改原始数组，这意味着它不会导致突变）。在您的情况下，它应该看起来像这样：

    return { ...state, pokemonList: [...state.pokemonList, action.listEachPokemon] }

    PS：通过concat还有一个替代选项（它返回一个新数组而不改变原始数组，这意味着它不会导致突变）。

    • 2

  2. 难怪，对于数组的每个值，您都在循环中覆盖状态，而不是添加新状态。需要修复：

    case ADD_POKEMONS:
            return{
                ...state, pokemonList: state.pokemonList.concat(action.listEachPokemon)
            }
    • 1

相关问题