Как выполнить рефакторинг, чтобы предотвратить потерю компонентом своего предыдущего состояния (ReactJS)? - PullRequest
Новая
       10

Как выполнить рефакторинг, чтобы предотвратить потерю компонентом своего предыдущего состояния (ReactJS)?

0 голосов
/ 03 января 2019

У меня есть следующая функция (в компоненте FilterGroupSection), которая вызывается в методе рендеринга компонента: 

renderFilterGroups() {
    const {filterGroupsData, activeId} = this.state;
    let isActive;

    // get an array of FilterGroup objects from the filterGroup data
    const filterGroups = filterGroupsData.map((filterGroupData, index) => {
        const key = filterGroupData.key;
        const filters = filterGroupData.filters;

        if (key === activeId) {
            isActive = true;
        } else {
            isActive = false;
        }

        return (
            <FilterGroup
                key={key}
                id={filterGroupData.id}
                selectFilterGroup={() => {
                    this.selectFilterGroup(key);
                }}
                removeFilterGroup={e => {
                    this.removeFilterGroup(key, e);
                }}
                deselectFilter={(
                    filterGroupId,
                    filterIndex,
                    filterName
                ) => {
                    this.handleFilterDeselection(
                        filterGroupId,
                        filterIndex,
                        filterName
                    );
                }}
                isActive={isActive}
                filters={filters}
            />
        );

    });

    // add conjunction object between each filterGroup
    const filterGroupsConjunctions = [];
    for(const filterGroup of filterGroups) {
        if(filterGroupsConjunctions.length > 0){
            const conjunction = <Conjunction key={uuid()} />
            filterGroupsConjunctions.push(conjunction);
        }
        filterGroupsConjunctions.push(filterGroup);
    }

    return filterGroupsConjunctions;
}

Метод возвращает массив объектов FilterGroup и Conjunction. Объекты FilterGroup создаются на основе массива данных в состоянии, и объект Conjunction добавляется между несколькими FilterGroups.

Компонент Conjunction имеет свое собственное состояние, которое имеет свойство value. Каждый раз, когда добавляется новая группа FilterGroup, все объекты Conjunction воссоздаются в соответствии со строкой (в приведенной выше функции): 

 const conjunction = <Conjunction key={uuid()} />

Это означает, что состояние объекта Conjunction сбрасывается при каждом добавлении новой группы FilterGroup. Я не хочу, чтобы состояние объекта Conjunction было сброшено. Как я могу предотвратить это?

Вначале я подумал, что, возможно, мне следует перенести некоторые из функций, описанных выше, в метод жизненного цикла компонента.

Ценю любые советы.

1 Ответ

0 голосов
/ 04 января 2019

Я решил этот ответ, сохранив значение соединения в том же массиве данных, что и группы фильтров, и затем передал его в качестве реквизита компоненту соединения.

Я также передал функцию-обработчик из родительского компонента (FilterGroupSection) в дочерний компонент (Conjunction), который запускается при изменении радиоэлемента в компоненте соединения. Функция как: 

handleConjunctionChange(filterGroupId, conjunctionType) {
    let filterGroupsData = this.state.filterGroupsData; // all filter groups

    const index = filterGroupsData.findIndex(
        group => group.id === filterGroupId
    );

    filterGroupsData[index] = {
        ...filterGroupsData[index], // id, key and filter properties
        conjunctionType: conjunctionType// set/overwrite the property we interested in
    };

    this.setState({ filterGroupsData: filterGroupsData });
}

Сохраняет выбранное значение опции радио в массив данных и, в свою очередь, обновляет состояние.

...