Объединить данные и создать массив с помощью Object.assign () - PullRequest
Новая
       14

Объединить данные и создать массив с помощью Object.assign ()

0 голосов
/ 07 февраля 2020

Я пытаюсь выполнить упражнение React-Redux. У меня есть массив в глобальном состоянии. Я печатаю это с компонентом. Затем я хочу добавить элемент в этот массив.

редуктор. 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 я пишу в консоль его реквизиты. Сначала это дает

{Список: Массив (6), Название: «Список продуктов», рассылка: ƒ} 

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:
category: "Electronics"
price: "$299.99"
stocked: true
name: "Nexus 8"
__proto__: Object
Title: "Product List"

Это превратило меня в объект, который я хотел добавить. Я не смог объединить этот элемент успешно. Как я могу добавить этот элемент в массив?

1 Ответ

2 голосов
/ 07 февраля 2020

ProductList - это массив, поэтому вы должны обращаться с ним как с одним. Прямо сейчас вы просто заменяете массив объектом.

try: 

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