React - Redux：存储中的数组未正确更新

Posted 2023-02-22

【中文标题】React - Redux：存储中的数组未正确更新

【英文标题】：React - Redux: Array in the store is not being updated correctly

【发布时间】：2021-12-06 04:50:54

【问题描述】：

首先对不起我的英语，我是一名法国开发人员，我从 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 
              ...state,
              questions: [...newOption],
              inputSelectedOptionValue: '',
            

粉碎所有问题.. 但是，如果我将这个返回更改为“questions: [...state.questions, newOption]”当我想在问题中添加其他输入时不起作用.. 我尝试改变“return newQuestion”，我尝试了很多东西但没有什么是好的..我松了我的头发

我希望你有勇气阅读..

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

理论

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

When i add question

【问题讨论】：

明确点：不要在外部作用域中声明newOption，然后将其用于两个完全不同的目的（数组和单个值），而是在内部作用域中声明它，然后使用@ 987654327@ 如果 if 在声明后没有更改，并且如果它是一个数组，则将其设为复数 newOptions。

如果newOption 确实是一个数组，你也应该传播它，即questions: [...state.questions, ...newOption]，但你的代码真的很难遵循，你应该发布重现问题所需的最少代码。

其他反馈：使用反引号来格式化文本中的任何内联代码，并且不要发布指向可能是内联图像或使用 makdown 代码块更好的实际格式化文本的图像的链接。

【参考方案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。