时间戳

首页 > 解决方案 > 如何使 React 功能组件重新创建回调函数并读取更新的道具

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

问题描述

我在 React 中有一个非常简单的功能组件。当这个组件被父组件渲染时，最初myList是一个空数组，最终当它加载完成时，它是一个包含一堆项目的列表。

问题是，myListinside的值onSearchHandler永远不会更新，它总是[].

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} />
};

有没有办法强制 onSearchHandler 重新评估 myList 的值？这种操作的推荐方法是什么？

标签： javascriptreactjsreact-hooks

解决方案

听起来好像AnotherComponent没有考虑更改的道具 - 这应该被认为是AnotherComponent. 理想情况下，您会修复它，以便正确使用更改后的道具。例如，仅举个例子，也许它正在做

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

并且未能按照应有的方式观察道具变化。或者，对于另一个随机示例，如果侦听器道具被传递到addEventListener组件安装时，但再次没有检查更改并删除/重新附加，则可能会发生这种情况。

如果你不能修复AnotherComponent，你可以使用 ref formyList除了道具：

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);
    };

它很丑，但它可能是你在这里唯一的选择。

推荐阅读