React-redux：更新数组中的值答案

【问题标题】：React-redux: Update value in arrayReact-redux：更新数组中的值
【发布时间】：2021-01-13 10:23:33
【问题描述】：

作为初始状态，我使用对象数组：

   export default{
      items: [
          {
            Date: 1,
            Operation: 'revenue',
          }
       ]
   }

在组件中，我调度动作，该动作必须更新数组对象中的一个元素：“操作”

 const mapDispatchToProps = (dispatch) => {
        return {
            selectOperation: (input) => dispatch({type: app.SELECT, payload: input})
         }
  };

   class OperationSelect extends React.Component {
      // constructor

      handleChange(event) {
         this.props.selectOperation({
            key: 'Operation',
            value: event.target.value
          });
      };

     // render() logic 
  }

 export default connect(null, mapDispatchToProps)(OperationSelect)

减速机：

 import initialState from '../constants/initialState';
 import { app } from '../constants/types';

 export default function update(state = initialState,  action) {
    switch (action.type) {
        case app.SELECT:
            return {
                ...state,
                [action.payload.key]: state.items.map(
                    (item, i)=> i===0 ? {...item, Operation: action.payload.value}
                    : item
                )
              };
        default:
            return state;
       }
   }

但是，当我选择新值并且应用程序运行handleChange，调度动作，运行reducer时，存储中的状态保持“操作”的旧值。

我做错了什么？

【问题讨论】：

您的项目必须具有唯一的key or id，以便您可以选择它们然后更新它们
您是否尝试过将 console.log 有效负载发送到 app.SELECT 操作？什么是有效载荷？
你的reducer不会改变你状态的items属性，而是action.payload.key属性（在这个例子中，Operation。）
Cường Mạnh Nguyễn，使用“console.log(items = ${JSON.stringify(this.props.itemsProp)});”在 handleChange-method 中，我看到 "items = [{"Date":1,"Operation":"revenue"}]"
phtrivier，你是对的。这是问题的根源。考虑到这个问题，我给出了答案。

标签： javascript reactjs redux react-redux

【解决方案1】：

这是我认为你需要做的：

首先将id property 添加到您的items，然后执行以下操作：

export default {
  items: [
    {
      id: 0,
      Date: 1,
      Operation: "revenue",
    },
  ],
};

class OperationSelect extends React.Component {
  // constructor

  handleChange(event) {
    this.props.selectOperation({
      key: "Operation", // I think you need to check this and try to findout that you need this or not
      value: event.target.value,
      id: 0 // 0 is just an example you need to decide how you would implement the id
    });
  }

  // render() logic
}


export default function update(state = initialState, action) {
  switch (action.type) {
    case app.SELECT:
      return {
        ...state,
        items: state.items.map((item, i) =>
          i === action.payload.id ? { ...item, Operation: action.payload.value } : item
        ),
      };
    default:
      return state;
  }
}

【讨论】：

【解决方案2】：

问题在于我没有在 reducer 中更新数组的状态。这是一个工作代码：

 export default function update(state = initialState,  action) {
    switch (action.type) {
      case app.SELECT:
        return {
            ...state,
            items: state.items.map(
                (item, i)=> i===0 ? {...item, [action.payload.key]: action.payload.value}
                : item
            )
          };
      default:
          return state;
    }
}

在之前的返回块中，我使用了 [action.payload.key]，其中应该使用“items”。所以我更新了“操作”，更新了“项目”。

【讨论】：