I have a react-select multiselect component which is required to have preselected values based on the user role. The react-select component is used to filter data in a react-table.

I have 2 user roles - Dev and tester. If it the dev, I need to have open and Reopened issues to be filtered on load If it is a tester, I need to have resolved issues on load

This is a part of the code that i am using to achieve preselected

async function loadInfo() {
    const body = {
        project_id: projDetails.id,
    };

    const response = await axios({
        method: "post",
        url: apilist.dropdownData,
        data: body,
    })
        .catch((err) => console.log(err));
    if (response) {
        const getData = response.data.data;
        // console.log("IsGeneralInfo:", getData)
        setGeneralInfo(getData);

        let filteredenv = getData.status.filter((item) => item.id == 8 || item.id == 6)
        let envfiltered = filteredenv.map((k) => {
            return ({ label: k.values, value: k.values });
        })

        // console.log("envfilter", envfiltered);
        // handleMultiStatusFilter(envfiltered);
    }
}    

// const {current:myArray}=useRef([{ label: 'Closed', value: 'Closed' }])
useEffect(() => {
    if(envfilter){
        let myArray=[{ label: 'Closed', value: 'Closed' },{ label: 'Reopen', value: 'Reopen' }];
        handleMultiStatusFilter(myArray);        
    }
}, [selectedOptions])    

const handleStatusFilter = (e) => {
    setFilterValue(e);
    if (e.length > 0) {
        dispatch(filterByValue({ type: e, viewIssue: viewIssue, }))
    }
    else {
        dispatch(showAllStatus({ type: 'All', viewIssue: viewIssue, }))
    }
}

const handleMultiStatusFilter = (e) => {
    setFiltered([])
    let arr = []
    e.map((data) => {
        setFiltered(prevState => [...prevState, data.value]);
        arr.push(data.value);
    })
    setSelectedOptions(e)
    handleStatusFilter(arr)
}

This is a part of the redux code used for filtering

extraReducers: (builder) => {
        // Add reducers for additional action types here, and handle loading state as needed
        builder.addCase(fetchIssueList.fulfilled, (state, action) => {
            // Add user to the state array
            state.issuesList = {
                status: 'idle',
                data: action.payload.data.data !== undefined ? action.payload.data.data : [],
                dataContainer: action.payload.data.data !== undefined ? action.payload.data.data : [],
                no_of_records: action.payload.data.data !== undefined ? action.payload.data.data.length : 0,
                error: {}
            }
        })

The code works fine with the filtering once i login, but the rerendering keeps going to infinite loop

Is there any way i could stop the infinite rerendering of code and have the filtering happen on load of the screen?

CodePudding user response：

while working with dependencies in useEffect, try to use the most primitive part you can find. no complex objects, as they change way too fast. for example: use the length of an array not the array itself. even though for arrays it's mostly safe to use itself.

CodePudding user response：

sorry. correction: for arrays it's not safe either. complex objects are compared by reference not by value. for that you need primitive types like number, string or boolean.