React -如果输入搜索文本，则显示结果列表

Question

我仍然对react缺乏经验，因此即使在寻找解决方案并找到一些指针后，我仍然无法掌握问题是什么或如何解决它。

我有一个呈现图像列表的组件。它还包含一个搜索输入。我将搜索输入onChanged复制到状态。如果onKeyPressed是返回键，或者当搜索按钮被按下时，该文本再次从state复制到state. searchterm。搜索本身是一种效果，它监视searchTerm中的变化，然后执行搜索，更新图像列表。然而，我觉得，因为我在搜索输入中改变了每次onChange的状态，我触发了整个组件的重新渲染，包括图像列表，这很烦人。我怎么才能摆脱这个?

我试图缩小我的样式和动态代码到一个最小的工作版本。解决这个问题的最好方法是什么?将列表和搜索拆分为具有单独状态的单独组件，父组件仅持有资产列表，将其传递给列表子组件，并将搜索子组件传递给onSearch引用，这会有所帮助吗?然后我把问题移开因为如果搜索子元素重新呈现，父元素也会重新呈现?

function AssetListTool ({}) {
const [assets, setAssets] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
const [searchText, setSearchText] = useState('');
const params = {
limit: 30,
sort: 'title:desc',
searchTerm
};
const Asset = memo(function ({asset }) {
return <>
<div className="asset">
<img src={asset.thumbnail} />
</div>
</>;
});
useEffect(() => {
const matchingAssets = assetApi.getAllAssets({...params });
Promise.all([matchingAssets],
).then(responses => {
setAssets(assets.concat(responses[0].items));
});
}, [searchTerm]);
const onSearchTextChanged = useCallback((event) => {
setSearchText(event.target.value);
}, [searchText]);
function onSearchKeyPressed(event) {
if (event.key === 'Enter') {
onSearch();
}
}
function onSearch() {
setAssets([]);
setSearchTerm(searchText);
}
return (
<>
<div>
<div>
<input onChange={onSearchTextChanged} onKeyPress={onSearchKeyPressed} value={searchText}
type="text"/>
</div>
<div>
<button onClick={onSearch}>
<Icon icon={faSearch}/>
</button>
</div>
</div>
<div>
{assets && assets.length > 0 &&
<div>
{assets.map((asset) => <Asset asset={asset}/>)}
</div>
}
</div>
</>
);
}

export default AssetListTool;

Answer 1

啊，我应该再多找一点，我就在正确的轨道上了…解决方案是不触及文本输入的状态，而是使用对它的引用，然后读取它进行搜索，如下所示:

在没有渲染器的情况下获取输入值

考虑一个局部变量，但不工作，使用event.target.value总是错过最后的输入。所以ref是这里的技巧…