Question

我（在FilterGroupSection组件中）具有以下函数，该函数在该组件的render方法中调用：

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对象，并在多个FilterGroup之间添加一个Conjunction对象。

Conjunction组件具有其自己的状态，该状态具有value属性。每次添加新的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）？

1 个答案: