如何解决功能组件中渲染之间的数据持久性
我目前正在SELECT CAST(NULL AS bigint) FROM ...
UNION ...
钩子中的CSV文件中加载2000个以上的对象。每次useEffect
更改时,CSV文件中的所有数据都会重新加载和过滤。有关详细信息,请参见下面的代码:
searchTerm
是否可以在渲染之间保留CSV数据?我一直在考虑的一种可能的解决方案是创建一个子组件,该子组件将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]);
重新渲染。
任何输入将不胜感激。
解决方法
我建议您将状态设为未过滤的数据,然后将过滤后的数据作为计算值。如果数据或搜索词均未更改,则可以使用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
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。