如何重构以防止组件丢失其先前的状态（ReactJS）？

Question

我有以下函数（在 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;
}

方法returns FilterGroup 和 Conjunction 对象的数组。 FilterGroup对象是根据状态中的数据数组创建的，并在多个FilterGroup之间添加一个Conjunction对象。

Conjunction 组件有自己的状态，其值为属性。每次添加新的 FilterGroup 时，所有的 Conjunction 对象都会按照以下行（在上面的函数中）重新创建：

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

这意味着每次添加新的 FilterGroup 时都会重置 Conjunction 对象的状态。我不想重置 Conjunction 对象的状态。我怎样才能阻止这种情况发生？

我最初的想法是，我或许应该将上述方法中的一些功能移动到组件生命周期方法中。

感谢任何建议。

Answer 1

我通过将合取值存储在与过滤器组相同的数据数组中，然后将其作为 prop 传递给合取组件来解决这个问题。

我还从父组件 (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 });
}

它将选定的单选选项值保存到数据数组中，然后更新状态。

如何重构以防止组件丢失其先前的状态（ReactJS）？

How to refactor to prevent component from losing its previous state (ReactJS)?

javascript

lifecycle

reactjs