动态更新复选框输入的 state

Question

I'm trying to generate a state property dynamically for an array of filters. These filters contain different checkboxes "names" and "isChecked" for each. See below example:

0: {name: "accompanying", isChecked: false}
1: {name: "bolting", isChecked: false}
2: {name: "carrying", isChecked: false}
3: {name: "coursing", isChecked: false}
4: {name: "defending", isChecked: false}
5: {name: "droving", isChecked: false}... 

Note: There are around 140 in total.

To get to this list I'm filtering a list I'm fetching from a server thus, I can filter duplicates and map it correctly. All of this happens in the render method.

Also, see the initial state. The property I need to update is "filter":

    state = {
        dogFilter: '',
        formIsOpen: false,
        advancedFilterRequested: false,
        filters: [],
    };

Inside the render method, I'm calling a method from my class that is supposed to update the "filters" property from the state. See below:

updateFiltersHandler = (filters) => {
    this.setState({ filters: filters });
};

render() {
        let breedForFilters;
        let temperamentMainFilters;
        let temperamentAdvancedFilter;
         
        //data coming from the reducer  
        if (this.props.dogs) {
            const initialDogsBreedForFilter = this.props.dogs
                .map((dog) => dog.bred_for)
                .join(' , ')
                .split(' ')
                .filter((word) => {
                    return word.endsWith('ing');
                })
                .map((word) => word.toLowerCase())
                .filter((word) => word !== 'driving')
                .sort();

            const dogsBreedWithoutDuplicates = removeDublicates(
                initialDogsBreedForFilter
            );

            // filters data before allocating it to elements TEMPERAMENT

            const initialTemperamentFilter = this.props.dogs
                .map((dog) => dog.temperament)
                .join(' , ')
                .split(' ')
                .filter((word) => word.length > 3)
                .map((word) => word.replace(',', '').toLowerCase())
                .sort();

            // SPLITS MAIN AND ADVANCED FILTERS IN TEMPERAMENT

            const advancedTemperamentFilters = initialTemperamentFilter.filter(
                (word) =>
                    word !== 'stubborn' &&
                    word !== 'playful' &&
                    word !== 'active' &&
                    word !== 'friendly' &&
                    word !== 'intelligent' &&
                    word !== 'gentle' &&
                    word !== 'gay'
            );

            const mainTemperamentsFilters = initialTemperamentFilter.filter(
                (word) =>
                    word === 'stubborn' ||
                    word === 'playful' ||
                    word === 'active' ||
                    word === 'friendly' ||
                    word === 'intelligent' ||
                    word === 'gentle'
            );

            //REMOVES DUPLICATES FROM MAIN LIST USING A HELPER FUNCTION 

            const mainTemperamentsFiltersNoDuplicates = removeDublicates(
                mainTemperamentsFilters
            );

            const advancedTemperamentFiltersNoDuplicates = removeDublicates(
                advancedTemperamentFilters
            );

            // Sets state for Filters CheckBoxes: => here is where I need help! 

            const filterBreedFor = dogsBreedWithoutDuplicates;

            const filtersForIntialState = filterBreedFor
                .concat(
                    mainTemperamentsFiltersNoDuplicates,
                    advancedTemperamentFiltersNoDuplicates
                )
                .map((filter) => {
                    return { name: filter, isChecked: false };
                });

            this.updateFiltersHandler(filtersForIntialState); 

            //BUILDS RENDER ELEMENTS

            breedForFilters = filterBuilder(
                'breedForFilter',
                dogsBreedWithoutDuplicates,
                this.onChangeCheckboxHandler
            );

            temperamentMainFilters = filterBuilder(
                'temperament',
                mainTemperamentsFiltersNoDuplicates,
                this.onChangeCheckboxHandler
            );

            temperamentAdvancedFilter = filterBuilder(
                'temperament',
                advancedTemperamentFiltersNoDuplicates,
                this.onChangeCheckboxHandler
            );
        }

        // CLASSES

        let formClass = [styles.FormHolder];
        if (this.state.formIsOpen) {
            formClass = [styles.FormHolder, styles.ShowForm];
        }

        let advancedFilterClass = [styles.OptionsHolderAdvanced];

        if (this.state.advancedFilterRequested) {
            advancedFilterClass = [styles.OptionsHolderAdvanced, styles.Show];
        }
        return (
            <React.Fragment>
                <MainNavbar />
                <header className={styles.FindADogFiltersSection}>
                    <h2>find your perfect puppy</h2>
                    <SectionDivider />
                    <div className={styles.FidDogFiltersHolder}>
                        <div className={styles.FilterBtn} onClick={this.openFormHandler}>
                            filters
                        </div>
                    </div>
                    <form className={formClass.join(' ')}>
                        <header className={styles.FormHeader}>
                            <FontAwesomeIcon
                                icon={faTimes}
                                className={styles.CloseFilterSectionBtn}
                                onClick={this.closeFormHandler}
                            />
                            <h2> filters </h2>
                            <button
                                className={styles.ClearSearch}
                                onClick={(event) => {
                                    event.preventDefault();
                                    this.clearFiltersHandler();
                                }}
                            >
                                clear
                            </button>
                        </header>
                        <div className={styles.OptionsSection}>
                            <div className={styles.CategoriesHolder}>
                                <h3>breed for</h3>
                                <div className={styles.OptionsHolder}>{breedForFilters}</div>
                            </div>

                            <div className={styles.CategoriesHolder}>
                                <h3>temperament</h3>
                                <div className={styles.OptionsHolder}>
                                    {temperamentMainFilters}
                                </div>
                                <div className={styles.AdvanceFiltersBtnHolder}>
                                    <button
                                        onClick={(event) => {
                                            event.preventDefault();
                                            this.openandCloseAdvancedSearch();
                                        }}
                                    >
                                        advanced
                                    </button>
                                </div>
                                <div className={advancedFilterClass.join(' ')}>
                                    {temperamentAdvancedFilter}
                                </div>
                            </div>
                            <div className={styles.CategoriesHolder}>
                                <h3>Size</h3>
                                <div className={styles.OptionsHolder}>
                                    <div key="small">
                                        <input type="checkbox" name="breedFor" value="35" />
                                        <label>Small</label>
                                    </div>
                                    <div key="big">
                                        <input type="checkbox" name="breedFor" value="36" />
                                        <label>Big</label>
                                    </div>
                                </div>
                            </div>
                            <div className={styles.SearchBtnHolder}>
                                <button
                                    className={styles.SearchBtn}
                                    onClick={(event) => {
                                        event.preventDefault();
                                        this.searchRequestHandler();
                                        this.setState({ advancedFilterRequested: false });
                                    }}
                                >
                                    search
                                </button>
                            </div>
                        </div>
                    </form>
                </header>
                <FinderDisplayDogs data={this.props.dogs} />
                <MainFooter />
            </React.Fragment>
        );
    }

Im getting the following error

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Is there a different way to update the state here. I'm new to react so not sure what to do next. I tried using componentDidMounth but I get the same error.

UPDATE: I have done this and it seemed to work:

    componentDidUpdate() {
        this.updateFiltersHandler();
    }

    updateFiltersHandler = () => {
        if (this.filtersForIntialState.length === this.state.filters.length) {
            return;
        } else {
            this.setState({ filters: this.filtersForIntialState });
        }
    };

Also, I replace this from my previous code:

            const filtersForIntialState = filterBreedFor
                .concat(
                    mainTemperamentsFiltersNoDuplicates,
                    advancedTemperamentFiltersNoDuplicates
                )
                .map((filter) => {
                    return { name: filter, isChecked: false };
                });

            this.updateFiltersHandler(filtersForIntialState); 

with this:

            this.filtersForIntialState = filterBreedFor
                .concat(
                    mainTemperamentsFiltersNoDuplicates,
                    advancedTemperamentFiltersNoDuplicates
                )
                .map((filter) => {
                    return { name: filter, isChecked: false };
                });

Answer 1

You are setting the state insider render() which is forbidden. Instead, call a function, check if the state is different than what you want it to be, and if so, update it. If not - return from function and don't change the state.