如何使 React 功能组件重新创建回调 function 并读取更新的道具

Question

I have a very simple functional component in React. When this component is rendered by the parent component, initially myList is an empty array, and then eventually when it finishes loading, it is a list with a bunch of items.

The problem is, the value of myList inside onSearchHandler never gets updated, it's always [] .

const MyComponent = ({ myList }) => {
  const [filteredList, setFilteredList] = useState(myList);

  console.log(myList); // <<< This outputs [], and later [{}, {}, {}] which is expected.

  useEffect(() => {
    setFilteredList(myList);
  }, [myList]);

  const onSearchHandler = (searchText) => {
    console.log(myList); /// <<< When this function is called, this always outputs []
    const filteredItems = myList.filter(item =>
      item.name.toLowerCase().includes(searchText.toLowerCase())
    );
    setFilteredList(filteredItems);
  };

  return <AnotherComponent items={filteredList} onSearch={onSearchHandler} />
};

Is there a way to force onSearchHandler to re-evaluate the value of myList? What would be the recommended approach for this sort of operation?

Answer 1

It sounds like AnotherComponent does not take into consideration the changed prop - this should be considered to be a bug in AnotherComponent . Ideally, you'd fix it so that the changed prop gets used properly. Eg, just for an example, maybe it's doing

const [searchHandler, setSearchHandler] = useState(props.onSearch);

and failing to observe prop changes as it should. Or, for another random example, this could happen if the listener prop gets passed to an addEventListener when the component mounts but again doesn't get checked for changes and removed/reattached.

If you can't fix AnotherComponent , you can use a ref for myList in addition to the prop:

const MyComponent = ({ myList }) => {
    const myListRef = useRef(myList);
    useEffect(() => {
        myListRef.current = myList;
        setFilteredList(myList);
    }, [myList]);
    const [filteredList, setFilteredList] = useState(myList);
    const onSearchHandler = (searchText) => {
        const filteredItems = myListRef.current.filter(item =>
            item.name.toLowerCase().includes(searchText.toLowerCase())
        );
        setFilteredList(filteredItems);
    };

It's ugly, but it might be your only option here.