如何刷新嵌套组件视图，以显示React中正在执行的搜索的结果

// 父组件
import React, { useState } from "react";
import ChildComponent from "./ChildComponent";

const ParentComponent = () => {
  const [searchResults, setSearchResults] = useState([]);

  const performSearch = () => {
    // 执行搜索逻辑，将结果存储在searchResults中
    // 示例中使用setTimeout模拟异步搜索结果
    setTimeout(() => {
      setSearchResults(["结果1", "结果2", "结果3"]);
    }, 2000);
  };

  return (
    <div>
      <button onClick={performSearch}>执行搜索</button>
      <ChildComponent searchResults={searchResults} />
    </div>
  );
};

export default ParentComponent;

// 子组件
import React, { useEffect } from "react";

const ChildComponent = ({ searchResults }) => {
  useEffect(() => {
    // searchResults发生变化时刷新视图
    console.log("搜索结果更新:", searchResults);
  }, [searchResults]);

  return (
    <div>
      <h2>搜索结果:</h2>
      <ul>
        {searchResults.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
};

export default ChildComponent;