如何使用这样的嵌套数据结构在 redux 中添加项目？我正在向选择数组添加新项目答案

【问题标题】：How can i add item in redux with nested data structure like this? I am adding new items to choice array如何使用这样的嵌套数据结构在 redux 中添加项目？我正在向选择数组添加新项目
【发布时间】：2018-07-23 09:37:12
【问题描述】：

我想将新项目动态推送到深度嵌套的选择数组中，这样我就可以使用 map 函数动态呈现反应原生 TextInput 组件。谁能帮帮我。请在下面找到数据结构和减速器设计以及其他代码。

Use case is like this:
UI: 
 Question:     _________
 Choice:       _________    Add more choices
 Right Choice: _________    Dropdown which gets data from choice array

 Next                  Add New Question

按下添加新问题时，添加来自 dynamicMCQGenerationDataFormat[0] 的新对象，然后使用映射函数 i 呈现两个问题，每个问题具有问题、选择、正确选择属性。我希望这足以让人们理解。

（点击添加更多选项时，将使用地图功能呈现。我不仅要在选项数组中推送新项目，而且后来我什至必须更改其中的内容。）

我有一个数据结构 dynamicMCQGenerationDataFormat：

[
  {
    "question": "What",
    "choice": ["choice"],
    "rightChoice": ""
  }
]

减速机：

import {
  EXAM_UPDATE,
  REFRESH_EXAM,
  INSERT_NEW_QUESTION,
  INSERT_NEW_CHOICE,
  UPDATE_QUESTION
} from '../actions/types';
import dynamicMCQGenerationDataFormat from '../assets/MCQGenerationFormat/dynamicMCQGeneration.json';

const INITIAL_STATE = {
  description: "",
  level: "",
  status: "",
  mcq: dynamicMCQGenerationDataFormat
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case EXAM_UPDATE:
      return { ...state, [action.payload.prop]: action.payload.value }
    case INSERT_NEW_QUESTION:
      console.log(action.payload);
      return { ...state, mcq: [ ...state.mcq, action.payload] }
    case UPDATE_QUESTION:
      return {
        ...state, mcq: state.mcq.map((mcq, i) => i === action.payload.idx ? {...mcq, question: action.payload.value} : mcq)
      }
    case INSERT_NEW_CHOICE:
      return { ...state, mcq: [...state.mcq, choice: [...state.mcq.choice]] }
    case REFRESH_EXAM:
      return { INITIAL_STATE }
    default:
      console.log('Enroll Guard Form Reducer');
      return state;
  }
};

动作创建者：

import { Actions } from 'react-native-router-flux';
import {
  EXAM_UPDATE,
  EXAMS_FETCH_SUCCESS,
  INSERT_NEW_QUESTION,
  UPDATE_QUESTION,
  INSERT_NEW_CHOICE
} from './types';
import firebase from 'firebase';
import { Alert } from 'react-native';

export const examUpdate = ({ prop, value }) => {
  return {
    type: EXAM_UPDATE,
    payload: { prop, value }
  };
};

export const insertNewQuestion = (value) => {
  return {
    type: INSERT_NEW_QUESTION,
    payload: value
  };
};

export const insertNewChoice = (value) => {
  return {
    type: INSERT_NEW_CHOICE,
    payload: value
  };
};

export const questionUpdate = ({ idx, value }) => {
  return {
    type: UPDATE_QUESTION,
    payload: { idx, value }
  };
}

从我的一个反应原生组件调用动作创建者：

pushNewQuestion() {
    this.props.insertNewQuestion(dynamicMCQGenerationDataFormat[0]);
}

这里的dynamicMCQGenerationDataFormat又是一样的：

[
  {
    "question": "What",
    "choice": ["choice"],
    "rightChoice": ""
  }
]

【问题讨论】：

粘贴您正在使用的代码，我们将修复您的错误
@DmitriiG。我包括了细节。你能帮帮我吗？

标签： javascript arrays redux react-redux immutability

【解决方案1】：

好的。我解决了。对于那些在更新深度嵌套的东西时遇到同样问题并且无法对数据进行反规范化的人，请参考这里。

case INSERT_NEW_CHOICE:
  return {
    ...state, mcq: state.mcq.map((mcq, i) => i === action.payload.idx ? {...mcq, choice: [ ...mcq.choice, action.payload.value]} : mcq)
  }

case UPDATE_CHOICE:
  return {
    ...state, mcq: state.mcq.map((mcq, i) => i === action.payload.idx ? {...mcq, choice: [ ...mcq.choice.map((choice, i) => i === action.payload.sIdx ? action.payload.value : choice ) ] } : mcq)
  }

【讨论】：