功能组件中渲染之间的数据持久性

Question

我目前正在从一个useEffect挂钩中的 CSV 文件加载 2000 多个对象。每次searchTerm更改时，CSV 文件中的所有数据都会重新加载和过滤。详情请参考以下代码：

  useEffect( () => {
    const asyncLoadWords = async () => {
      const dnd_words = await d3.csv(data_csv);
      const results = dnd_words.filter(wordObject => {
        return wordObject.??.toLowerCase().includes(searchTerm);
      });
      setSearchResults(results);
    }
    asyncLoadWords();    
  },[searchTerm]);

有没有办法在渲染之间保留 CSV 数据？我一直在考虑的一种可能的解决方案是创建一个子组件，它将 CSV 数据作为道具并通过useEffect.

任何投入将不胜感激。

Answer 1

我建议将您的状态设为未过滤的数据，然后将过滤后的数据设为计算值。useMemo如果数据和搜索词都没有改变，您可以使用跳过重新计算过滤器。如果只有搜索词发生变化，那么它可以使用已经加载的数据重新计算过滤器。

const Example = () => {
  const [words, setWords] = useState([]);
  useEffect(() => {
    const asyncLoadWords = async () => {
      const dnd_words = await d3.csv(data_csv);
      setWords(dnd_words);
    }
    asyncLoadWords();
  }, []);

  const [searchTerm, setSearchTerm] = useState('');

  const results = useMemo(() => {
    return words.filter(wordObject => {
      return wordObject.??.toLowerCase().includes(searchTerm);
    });
  }, [words, searchTerm]);

  // etc
}