javascript - 使用 Object.assign() 合并数据并创建数组

Question

我正在尝试 React-Redux 练习。 我有一个处于全局状态的数组。我用组件打印它。然后我想添加项目这个数组。

reducer.js

 export var initialState={
    ProductList:[
        {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
        {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
        {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
        {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
        {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
        {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
    ],
    title:"Product List"
    }
    export default function reducer(state=initialState, action){
        switch(action.type){
           case 'CREATE':
                return Object.assign({}, state, { ProductList: action.payload.__item });
           case 'UPDATE_TITLE':
                return Object.assign({}, state, { title: action.payload.__title });
           default:
                return state;
        }
    }

action.js

import {store} from '../index'

export function RemoveItem(id){
    store.dispatch({
        type:'CREATE',
        payload:{
          __item: {category: "Electronics", price: "$299.99", stocked: true, name: "Nexus 8"}
        }
    });
}

export function UpdateTitle(){
    store.dispatch({
        type:'UPDATE_TITLE',
        payload:{
           __title:"Updated Title"
        }
    });
}

ProductComponent.js

import React from 'react';
import ReactDOM from 'react-dom';
import {connect} from 'react-redux';
import { withRouter } from 'react-router-dom';
import {CreateItem,UpdateTitle} from "../ReduxTest/action";


 class ProductComponent extends React.Component{
    constructor(props){
        super(props)
    }

    createItem=()=>{
        CreateItem();
    }

    updateTitle=()=>{
        UpdateTitle();
    }

    render(){
            console.log(this.props)
            const _title=<h3>{this.props.Title}</h3>
            const _list=this.props.List.map((item)=>
                (
                    <div>{item.name}</div>
                )           

        )
        return (
            <div>
                {_title}
                {_list}
                <button onClick={this.createItem}>Create</button>
                <button onClick={this.updateTitle}>Title</button>
            </div>
        )
    }
}

const mapStateToProps = (state,ownProps)=>({
    List:state.reducer1.ProductList,
    Title:state.reducer1.title
})

export default connect(mapStateToProps)(ProductComponent);

在 ProductComponent 渲染部分中，我编写了控制台它的 props。首先它给出

{List: Array(6), Title: "Product List", dispatch: ƒ}

List: Array(6)
0: {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"}
1: {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"}
2: {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"}
3: {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"}
4: {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"}
    5: {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
length: 6
__proto__: Array(0)
Title: "Product List"

没问题。我成功显示列表。单击创建按钮后 Object.assign({}, state, { ProductList: action.payload.__item }); 然后它给出

{List: {…}, Title: "Product List", dispatch: ƒ}

List:
category: "Electronics"
price: "$299.99"
stocked: true
name: "Nexus 8"
__proto__: Object
Title: "Product List"

它把我变成了一个我想要添加的对象。我无法成功合并该项目。如何将此项目添加到数组中？

Answer 1

ProductList 是一个数组，因此您必须将其视为一个数组。现在您只需用对象替换数组。

尝试:

return Object.assign({}, state, { ProductList: state.ProductList.concat(action.payload.__item) });