React.js搜索栏填充内容后隐藏建议项span的问题求解

• 选中建议项时仅更新了query为选中的城市名，未清空存储建议列表的data数组，且此时query不为空，会触发后续的建议接口请求返回新的匹配结果，导致建议列表持续展示
• 点击搜索按钮触发的search方法中没有清空query和data的逻辑，仅回车搜索时做了清空query的处理，因此点击搜索后建议列表不会消失
• 额外可优化点：当前的fetch请求未正确捕获异常，外层的try/catch无法捕获Promise链内抛出的错误

1. 修改建议项点击逻辑 #

选中建议后直接清空建议列表，避免选中后列表残留：

<div key={key} onClick={() => { 
  setQuery(suggestion.ascii);
  setData([]); // 新增：选中后清空建议列表
}}>
  <span>{suggestion.ascii}</span>
</div>

2. 补充搜索提交的清空逻辑 #

在点击搜索触发的search方法中新增输入框和建议列表的清空逻辑，和回车提交行为对齐：

const search = async () => {
  setIsLoading(true);
  await props.onCitySearch(data)
  setIsLoading(false);
  setQuery(''); // 新增：提交后清空输入框
  setData([]); // 新增：提交后清空建议列表
}

3. 修复异常捕获逻辑（可选优化） #

将fetch的异常捕获移到Promise链的catch中，确保接口异常能被正确捕获：

useEffect(() => {
  if (query === "") {
    setData([]);
    return;
  }

  const path = position === null
    ? `http://localhost:8080/suggestions?q=${query}&page=0`
    : `http://localhost:8080/suggestions?q=${query}&latitude=${position.latitude}&longitude=${position.longitude}&page=0`

  fetch(path)
    .then(response => response.json())
    .then(({ cities }) => setData(cities))
    .catch(e => console.error(e)); // 替换原外层try/catch，用catch捕获异步异常

}, [query, position])

内容的提问来源于stack exchange，提问作者Alain