Question

在 react-redux 中将对象添加到嵌套数组

2019-05-22

2419

reactjs redux react-redux

我在网上找到了很多解决方案，但我已经尽力了一周，还是没有找到解决办法。我相信问题出在 reducer ADD_GOAL 上，这就是我将其留空的原因。

非常感谢！:)

我想将对象添加到 goals 数组 。我总是想将目标初始化为空，但我希望能够自由地添加和删除对象。这个想法是像这样保存对象。

{
  list: {
    '0': {
      id: 0,
      dueDate: 'By May 28th I Will have: ',
      goals: [
        {0: {...}
         1: {...}
         3: {...}
}
      ]
    }
   '1':{
      id: 0,
      dueDate: 'By June 31st I Will have: ',
      goals: [
        {2: {...}
         4: {...}
  }
}

Reducer

export default (state = {}, action) => {
  let copyList = [{ description: '213', aim: 12, progress: 2, percentage: 20 }];
  switch (action.type) {
    case 'ADD_DUEDATE':
      return { ...state, [action.payload.id]: action.payload }
    case 'ADD_GOAL':
      return {

      }
    case 'DELETE_TODO':
      return state.filter((item, index) => index !== action.payload)
    default:
      return state;
  }
}

Component

import React from 'react';
import { connect } from 'react-redux';

class List extends React.Component {
  state = {
    id: 0,
    goalId: 0
  }

  createDueDate = () => {
    this.props.add({
      id: this.state.id,
      dueDate: "By May 28th I Will do something: ",
      goals: [{}]
    })
    this.setState({ id: this.state.id + 1 });
  }

  addGoal = () => {
    this.props.addToList({
      goals:
        [{ id: this.state.goalId, description: '213', aim: 12, progress: 2, percentage: 20 }]
    })
    this.setState({ goalId: this.state.goalId + 1 })

  }

  render() {
    return (
      <div>
        <div>
          <button className="btn btn-secondary" onClick={this.createDueDate}></button>
        </div>

        <div>
          <button className="btn btn-primary" onClick={this.addGoal}></button>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    list: state.list
  }
}

function mapDispatchToProps(dispatch) {
  return {
    add: (value) => {
      dispatch({ type: 'ADD_DUEDATE', payload: value })
    },
    get: (id) => {
      dispatch({ type: 'GET_DUEDATE', payload: id })
    },
    addToList: (value) => {
      dispatch({ type: 'ADD_GOAL', payload: value })
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(List);

Answer 1

假设我们的 Reducer 中有一个嵌套的项目数组：

const initialState = {
    items : {
        deepItem  :[1, 2, 2],
        reallyDeepItem: {
            a : [1,2,3]
            b : {'a', 'c'}
        }
    }
}

现在我们假设有 2 个操作，一个是在 state.items.deepItem 上添加一个项目，我们将调用 ADD_DEEP_ITEM ，另一个是在 state.items.reallyDeepItem.a 上插入一个项目，称为 ADD_DEEPER_ITEM 。让我们编写我们的 Reducer：

const Reducer = (state = initialState, action) =>{
    switch(action.type){
        case 'ADD_DEEP_ITEM': return {
            ...state,
            items : {
                ...state.items,
                deepItem : state.items.deepItem.concat(action.data)
            }
        }

        case 'ADD_DEEPER_ITEM': return{
            ...state,
            items :{
                ...state.items,
                reallyDeepItem:{
                    ...state.items.reallyDeepItem,
                    a : state.itens.reallyDeepItem.a.concat(action.data)
                }
            }
        }
    }
}

就是这样，正确更新！只需记住始终传播所有属性，然后覆盖您想要的属性。