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

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
}

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

Data Persistence Between Renders in Functional Component

csv

reactjs

use-effect