React - Redux：商店中的数组未正确更新

Question

首先抱歉我的英语不好，我是一名法国开发人员，我从 React redux lib 开始，我想编写表单生成器代码，但我在渲染数组时遇到问题。我用代码图片向我解释。（准确地说，目前它是静态的）

我想在问题数组中添加问题：问题：[] 构造为

    questions : [
      {
        dataid: 1,
        label:"coucou",
        input: [
        {
          dataid: 1,
          type:"radio",
          value:"oui",
        },
        {
          dataid: 2,
          type:"radio",
          value:"non",
        }
      ]
           
      },
    ],

添加问题的代码：


   case ADD_OTHER_OPTION: {

          // je recherche le nombre d'option dans une question 
          let questionsInputLength = state.questions.map((items) => {
            return (items.input.length);
          } )

          // initialisation d'un dataid pour faire mon calcul et le rendre unique
          let idMax;
          if (state.questions.length > 0) {
           // si j'ai supprimé toute les options d'une question, j'ai encore la question de présente
           // et le [] input est à 0 donc je réinitialise le data id de la premier option à 0 
            if ((questionsInputLength.includes(0))) {
              idMax = ['0'];
            }
            else {
              // si j'ai déjà des options dans une question 
             state.questions.map((item) => {
                idMax = item.input.map((inputs) => inputs.dataid)
                return idMax;
              });            
            }
          }
          else {
            // si je n'ai pas encore de question, 
            // j'initie un dataid à 0 sous forme de []pour la fonction Math.max() +1
            idMax = ['0'];
          }
          
          const hightId = Math.max(...idMax) + 1;
          // initialisation d'une nouvelle option
          let newOption;
          // si j'ai le meme data id dans le state et dans l'action et que mon [] de questions est sup à 0
          if (state.dataid == action.dataid && state.questions.length > 0) {
          
            console.log('je suis dans le if du add option');
          
            newOption = state.questions.map((question) => {
              
              if (question.dataid == action.dataid) {
                console.log('meme id' + '  ' + question.dataid + '  '+ action.dataid)
          
                const newInput = {
                  dataid: hightId,
                  type: action.value,
                  value: state.inputSelectedOptionValue,
                };
          
                return {
                  ...question,
                  dataid: action.dataid,
                  label: state.inputQuizQuestionValue,
                  input: [ ...question.input, newInput]
                  
                };
              } 
              else {
                console.log('pas le meme dataid, autre question')
                // TODO revoir tout ce code, j'ecrase la question au lieu de la rajouter et du coup je rajotue les autre input sous la  premiere question.
                  
                  const newQuestion = {
                    // ...question,
                    dataid: state.dataid,
                    label: state.inputQuizQuestionValue,
                    input: 
                    [
                      {
                        dataid: hightId,
                        type: action.value,
                        value: state.inputSelectedOptionValue,
                      },
                    ]
                  }
            
                  return newQuestion

              }
          
            })
            
            console.log('je vais return avant le else du add option');
            console.log(newOption);
            return {
              ...state,
              questions: [...newOption],
              inputSelectedOptionValue: '',
            }
          }
          // si mon tableau de question est vide
          else {
            console.log('je suis dans le else du add option');
          
            newOption = {
              dataid: state.dataid,
              label: state.inputQuizQuestionValue,
              input: 
              [
                {
                  dataid: hightId,
                  type: action.value,
                  value: state.inputSelectedOptionValue,
                },
              ]
            }
          }
          console.log('dernier return  du add option');
          
          return {
            ...state,
            questions: [...state.questions, newOption],
            inputSelectedOptionValue: '',
          }
        }

当我的数组中没有问题时代码没问题，我可以添加一个。当我有一个时，我可以添加相同类型和其他值和其他 dataId 的多输入。但是当我想添加其他问题时，代码不正确，我粉碎问题添加其他，这是正常的，“return newQuestion”将问题放在“newOption”中，而这个return

 return {
              ...state,
              questions: [...newOption],
              inputSelectedOptionValue: '',
            }

粉碎所有问题.. 但是，如果我将此 return 更改为“问题：[...state.questions，newOption]”，当我想在问题中添加其他输入时，它不起作用。我尝试更改“return newQuestion”，我尝试了很多但没有什么是好的..我掉头发了

我希望你有勇气去阅读..

非常感谢..和“Passez une bonne journée les devs”

Thery

console.log(state.questions) after adding one question whith other input

When i add question

Answer 1

你的reducer中有两种情况，1.在questions数组中添加了一个新问题，2.在当前问题中添加了一个新问题option。

您添加问题的实现如下所示：

return {
  ...state,
  questions: [...state.questions, newQuestion],
  inputSelectedOptionValue: '',
}

但是要为当前问题添加新选项，您需要知道要为其添加选项的问题 ID。

假设我们需要更新问题 id 2 以向其添加新选项。

有两部分，首先需要找到那个问题，然后为这个已创建的问题添加一个新选项。

return {
  ..state,
  questions: state.questions.map(question => 
    (question.id === 2 ?
       {...question, input: [...question.input, newOption]} 
       : question)
    )
}

注意： 假设目标问题 id 为 2，我们发现并将新选项添加到 input 数组。但是您必须将 hardcoded 问题 ID 2 替换为您要为其添加新选项的 questionId。

React - Redux：商店中的数组未正确更新

React - Redux: Array in the store is not being updated correctly

arrays

dictionary

reactjs

redux