Reactjs 功能组件中呈现之间的数据持久性

我目前正在一个

useffect

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数据作为道具，并通过

useffect

重新渲染

---

任何输入都将不胜感激。

我建议将您的状态设置为未过滤的数据，然后将过滤后的数据设置为计算值。如果数据和搜索词均未更改，则可以使用

usemo

跳过重新计算筛选器。如果只有搜索词改变，那么它可以使用已经加载的数据重新计算过滤器

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
}

---

太好了！我只需映射

结果

，并在输入字段中添加一个简短的去Bounce来启动查询。谢谢你的帮助！