Проблема с реагирующими данными рендеринга FlatList при обновлении массива объектов, сохраняемых в избыточном

Question

Я загружаю динамическую c форму в FlatList. Я должен добавить несколько строк с элементами пользовательского интерфейса, такими как TextInput, флажок и т. Д. c. основанный на условии. Например, у меня есть выпадающий список, когда я выбираю значение, мне нужно добавить строку с кнопкой и удалить эту строку, когда я выбираю другое значение.

Моя проблема заключается в том, что всякий раз, когда я выбираю значение в выпадающий, чтобы добавить строку с кнопкой, FlatList добавляет дубликаты строк, и они не видны как объекты в моем массиве, когда я их отлаживаю. Я использую Redux для управления состоянием приложения и обновляю свой массив в редукторах.

Мне нужно отображать объекты в моем массиве в FlatList без дубликатов, используя Redux для управления состоянием.

Код:

<FlatList
    key={Math.floor(Math.random())}
    ref={(ref) => { this.flatListRef = ref; }}
    data={this.state.mainArray}
    renderItem={this._renderItem}
    keyExtractor={({ item, id }) => String(id)}
    extraData={this.prop}
    keyboardDismissMode="on-drag"
   showsVerticalScrollIndicator={false}
   scrollEnabled={true}
   removeClippedSubviews={false}
   scrollsToTop={false}
   initialNumToRender={100}
  />

componentWillReceiveProps(nextProps) {
      this.setState({mainArray: nextProps.mainArray});

}

Обновление массива в Reducer:

case VALIDATE_DEPENDENCY: {
    // adding or removing dependency questions
    let dependingQues = [];
    let formArrayTemp = [...state.mainArray];
    let exists;
    // console.log("formArrayTemp123", formArrayTemp);
    if (action.item.isDependentQuestion) {
        if (action.item.dependentQuestionsArray.length > 0) {
            let dependent_ques = action.item.dependentQuestionsArray[0];
            state.depending_questions_array.filter((obj, id) => {
                if (JSON.stringify(obj.key_array) === JSON.stringify(dependent_ques.key)) {
                    dependingQues.push(obj);
                }
            });
            // console.log("dependingQues123", dependingQues);
            if (dependent_ques.answer === action.item.answer) {
                dependingQues.map((obj, id) => {
                    exists = formArrayTemp.filter((res, idx) => {
                        if (JSON.stringify(res.key_array) === JSON.stringify(obj.key_array)) {
                            return res;
                        }
                    });
                    // console.log("exists123", exists);
                    if (exists.length === 0) {
                        formArrayTemp.splice(action.index + id + 1, 0, obj);
                        // console.log("mjkgthbythyhy", action.index + id + 1);
                    }
                });
            }
            else {
                let objIndex = formArrayTemp.findIndex(obj => JSON.stringify(obj.key_array) === JSON.stringify(dependent_ques.key));
                if (objIndex !== -1) {
                    formArrayTemp[objIndex].answer = "";
                    formArrayTemp[objIndex].borderColor = "black";
                    formArrayTemp.splice(objIndex, 1);
                    // console.log("frtg6hyjukiu", formArrayTemp);
                }
            }
        }
    }
    // adding or removing dependent sections
    let dependentSections = [];
    let tempArr = [];
    let count = 0;
    if (action.item.isDependent) {
        if (action.item.dependentArray.length > 0) {
            let dependent_section = action.item.dependentArray[0];
            state.dependent_sections_array.filter((obj, id) => {
                if (obj.section_id === dependent_section.section_id) {
                    dependentSections.push(obj);
                }
            });
            // console.log("dependentSections123", dependentSections);
            let lastIndex;
            formArrayTemp.filter((res, id) => {
                if (action.item.section_id === res.section_id && res.dependentArray &&
                    JSON.stringify(action.item.dependentArray) === JSON.stringify(res.dependentArray)) {
                    tempArr.push(res);
                    lastIndex = formArrayTemp.FindLastIndex(a => a.section_id === res.section_id);
                }
            });
            // console.log("lastIndex123", lastIndex);
            tempArr.map((obj, id) => {
                if (obj.answer === obj.dependentArray[0].answer) {
                    count++;
                }
            });
            if (dependent_section.answer === action.item.answer) {
                dependentSections.map((obj, id) => {
                    if (formArrayTemp.contains(obj) === false) {
                        formArrayTemp.splice(lastIndex + id + 1, 0, obj);
                        // console.log("cfrererfre", formArrayTemp);
                    }
                });
            }
            else {
                let countTemp = [];
                if (count === 0) {
                    let countTemp = [];
                    dependentSections.filter((res, id) => {
                        if (formArrayTemp.contains(res) === true) {
                            formArrayTemp.filter((obj, idx) => {
                                if (obj.section_id === res.section_id) {
                                    obj.answer = "";
                                    obj.borderColor = "black";
                                    countTemp.push(obj);
                                }
                            });
                        }
                    });
                    let jobsUnique = Array.from(new Set(countTemp));
                    formArrayTemp = formArrayTemp.filter(item => !jobsUnique.includes(item));
                    // console.log("frefrefre123", formArrayTemp);
                    // return { ...state, mainArray: [...formArrayTemp] }
                }
            }
        }
    }
    console.log("formArray123", formArrayTemp);
    formArrayTemp.sort((a, b) => {
        return a.posiiton - b.position;
    });
    return { ...state, mainArray: formArrayTemp }
};

Обновление

После изучения этой проблемы я столкнулся с этой проблемой # 24206 в GitHub. Там говорится:

Есть несколько вещей, которые вы делаете не совсем правильно. Каждый раз, когда запускается функция рендеринга, вы создаете новый объект массива для ваших данных, поэтому React должен каждый раз перерисовывать весь список, функции renderItem и keyExtractor также переделывают каждый рендеринг, поэтому FlatList должен быть перезапущен. , Вы также используете индекс для своего ключа, который означает, что, как только что-то перемещается, оно будет перерисовывать все после этой точки. Я бы порекомендовал посмотреть, что меняется / не меняется при перезапуске (массивы, функции, объект) и почему keyExtractor важен для уменьшения повторного рендеринга.

Поэтому я попытался комментировать KeyExtractor опора FlatList и проблема была решена. Но это вызывает проблему в другой форме. Как я могу решить это?