点击Find按钮时State未重置且仅显示最新结果的问题排查

问题分析 #

你的代码存在两个核心问题：

1. React状态更新的异步性：setResults是异步操作，调用setResults([])后立刻进入循环时，results的旧值还未完成更新，循环里的[...results, ...]始终基于初始空数组，最终只会保留循环最后一次添加的项。
2. 循环内多次触发状态更新：用var声明的i存在变量提升问题，加上每次循环都调用setResults，异步更新会被覆盖，最终只显示最后一条数据。

修复后的代码 #

const SearchContact = () => {
  const [results, setResults] = useState([]);

  const handleFind = () => {
    const response = [
      { name: "Tim", email: "timothy@outlook.com" },
      { name: "Fred", email: "fred@outlook.com" }
    ];

    // 先构建完整的结果数组，再一次性更新状态
    const newResults = response.map(item => {
      const resultItems = [
        <div>{item.name}</div>,
        <div>{item.email}</div>
      ];
      return { resultItems };
    });

    setResults(newResults);
  }

  return (
    <>
      <Button onClick={handleFind}>Find</Button>
      {results.map((result, index) => (
        <div key={index}>
          {result.resultItems.map((resultItem, idx) => (
            <div key={idx}>{resultItem}</div>
          ))}
        </div>
      ))}
    </>
  )
}

修复说明 #

• 一次性构建结果数组：先遍历response生成完整的newResults数组，再调用一次setResults，既避免了异步更新导致的状态覆盖问题，也自然完成了结果集的重置（直接替换为新数组）。
• 替换循环方式：用map替代for循环，避免var的变量提升问题，代码更简洁易读。
• 补充根元素：返回部分添加<>包裹，符合React组件必须有单一根元素的规则（原代码中Button和结果列表无共同根元素会报错）。

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