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

Question

我目前正在 useEffect Hook 中从 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 数据作为 Prop 并通过 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
}