Question

我想将新项目动态地推送到深度嵌套的选择数组中，以便随后我可以使用map函数动态地渲染本机TextInput组件。谁能帮我一下。请在下面找到数据结构和reducer设计以及其他代码。

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;
  }
};

ActionCreator：

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": ""
  }
]

Answer 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)
  }

我如何在具有嵌套数据结构的redux中添加项目？我正在向选择数组添加新项目

1 个答案: