反应检测点击外部组件清除我的 state

Question

I have an outsideAlerter component that functions elsewhere on my site. I am now using it on a repeatable component and for some reason it is clearing my state effectively breaking my desired outcome.

below is my wrapper component that detects if you click outside of its children

import React, { useRef, useEffect } from "react";

/**
 * Hook that alerts clicks outside of the passed ref
 */
function useOutsideAlerter(ref, onClickOutside) {
    useEffect(() => {
        /**
         * Alert if clicked on outside of element
         */
        function handleClickOutside(event) {
            if (ref.current && !ref.current.contains(event.target)) {
              //console.log(onClickOutside);
              onClickOutside();
            }
        }

        // Bind the event listener
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            // Unbind the event listener on clean up
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);
}

/**
 * Component that alerts if you click outside of it
 */
export default function OutsideAlerter(props) {
    const wrapperRef = useRef(null);
    useOutsideAlerter(wrapperRef, props.onClickOutside);

    return <div ref={wrapperRef}>{props.children}</div>;
}

Below is my controller component, it handles state

const TableFilterDropdownController = ({style, rows, colKey, activeFilters, addActiveFilter}) => {
    const [tableFilterState, setTableFilterState] = useState(
        {
            state: INACTIVE,
            iconColor: "black",
            filter: "",
            filteredRows: [...rows],
            localActiveFilters: []
        }
    );

    useEffect(() => {
        let state = tableFilterState.state;
        let localActiveFilters = tableFilterState.localActiveFilters;
        if (state === INACTIVE && localActiveFilters.length > 0) {
            setTableFilterState({...tableFilterState, state: ACTIVE})
        }
    }, [tableFilterState.state])
    //filter out repeats and rows that don't match input
    useEffect(() => {
        let filter = tableFilterState.filter
        if (filter !== "") {
            let tempFilteredRows = []; 
            rows.map(row => {
                if (row[colKey].toLowerCase().includes(filter.toLowerCase()) && 
                !tempFilteredRows.includes(row[colKey])) {
                    tempFilteredRows.push(row[colKey]);
                }
            })
            setTableFilterState({...tableFilterState, filteredRows: tempFilteredRows})
        }
        else {
            let tempFilteredRows = []; 
            rows.map(row => {
                if (!tempFilteredRows.includes(row[colKey])) {
                    tempFilteredRows.push(row[colKey]);
                }
            })
            setTableFilterState({...tableFilterState, filteredRows: tempFilteredRows});
        }
    }, [tableFilterState.filter, rows])

    const onClick = () => {
        if (tableFilterState.state === DROP_DOWN) {
            console.log(tableFilterState)
            if (tableFilterState.localActiveFilters.length > 0) {
                //setState(ACTIVE)
                setTableFilterState({...tableFilterState, state: ACTIVE});
            }
            else {
                //setState(INACTIVE)
                setTableFilterState({...tableFilterState, state: INACTIVE});
            }
        }
        else {
            //setState(DROP_DOWN)
            setTableFilterState({...tableFilterState, state: DROP_DOWN});
        }
    }
    //something here is breaking it and resetting on click outside

    const onClickOutside = () => {
        setTableFilterState({...tableFilterState, state: INACTIVE});
    }

    let addLocalActiveFilter = (filter) => {
        let newActiveFilters = [...tableFilterState.localActiveFilters];
        const index = newActiveFilters.indexOf(filter);
        if (index > -1) {
            newActiveFilters.splice(index, 1);
        } else {
            newActiveFilters.push(filter);
        }
        setTableFilterState({...tableFilterState, localActiveFilters: newActiveFilters});
    }
    

    return (
      <TableFilterDropdown 
        style={style}
        color={tableFilterState.iconColor}
        state={tableFilterState.state}
        onClick={onClick}
        onClickOutside={onClickOutside}
        dropLeft={true}
        filter={tableFilterState.filter}
        setFilter={e => setTableFilterState({...tableFilterState, filter: e.target.value})}

      >
      
        {tableFilterState.filteredRows.map((item, index) => {
            return (
              <CheckboxInput 
                value={item} 
                label={item} 
                key={index} 
                onChange={e => {
                  addActiveFilter(e.target.value);
                  addLocalActiveFilter(e.target.value)
                  }} 
                isChecked={tableFilterState.localActiveFilters.includes(item)}
              />
            );
        })}
      </TableFilterDropdown>
    );
}

export default TableFilterDropdownController;

And lastly below is the UI component

const TableFilterDropdown = ({style, state, color, children, onClick, onClickOutside, dropLeft, filter, setFilter}) => {
    
    useEffect(() => {
        console.log("state change")
        console.log(state);
    }, [state])

    return (
    <div 
      className={`sm:relative inline-block ${style}`} 
    >
      <OutsideAlerter onClickOutside={onClickOutside}>
        <IconButton 
          type="button" 
          style={`relative text-2xl`}
          onClick={onClick}
        >
         <IconContext.Provider value={{color: color}}>
            <div>
                {state === DROP_DOWN ?
                <AiFillCloseCircle /> :
                state === ACTIVE ?
                <AiFillFilter /> :
                <AiOutlineFilter />
                }
            </div>
          </IconContext.Provider>
        </IconButton>

        {state === DROP_DOWN ? 
          <div className={`flex flex-col left-0 w-screen sm:w-32 max-h-40 overflow-auto ${dropLeft ? "sm:origin-top-left sm:left-[-2.5rem]" : "sm:origin-top-right sm:right-0"} absolute mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10`} role="menu" aria-orientation="vertical" aria-labelledby="menu-button">
            <SearchBar label={"Search"} placeholder={"Search"} value={filter} onChange={setFilter} />
              {children}
            
          </div>
          : null}
      </OutsideAlerter>
    </div>
  );

For some reason whenever you click outside the component the tableFilterState gets set to

{
                state: INACTIVE,
                iconColor: "black",
                filter: "",
                filteredRows: [],
                localActiveFilters: []
            }

Which is not intentional, the tableFilterState should stay the same, only state should change. I can't figure this out so please help

Answer 1

When you call useOutsideAlerter and pass onClickOutside handler it captures tableFilterState value and use it in a subsequent calls. This is a stale state. You could try this approach or use refs as described in docs :

const onClickOutside = () => {
  setTableFilterState(tableFilterState => ({
    ...tableFilterState,
    state: INACTIVE,
  }));
}