我在使用React在两个组件之间进行通讯时遇到麻烦。

以下是代码：

档案Search.js：

const Search = (props) => {
  const [items, setItems] = React.useState(null);
  const [input, setInput] = React.useState("");

  const apiKey = "*********";

  async function handleSubmit(event) {
    event.preventDefault();

    await fetch(
      `https://geo.ipify.org/api/v1?apiKey=${apiKey}&ipAddress=${input}`
    )
      .then((response) => {
        console.log(response);
        return response.json();
      })
      .then((result) => {
        console.log(result);
        setItems(result);
      });
  }

  const handleChange = (event) => {
    setInput(event.target.value);
  };

  return (
    <div>
      <form onSubmit={handleSubmit} className="my-wrap">
        <input
          type="text"
          className="searchTerm"
          placeholder="Search for any IP adress or domain"
          value={input}
          onChange={handleChange}
        />
        <button type="submit" className="searchButton">
          {" "}
          <img src={RightIcon} alt="icon" />{" "}
        </button>
      </form>
    </div>
  );
};

export default Search;

档案Results.js：

const Results = (props) => {
  const { ip, city, country, postalCode, timezone, isp } = props;

  return (
    <div>
      <div className="grid-container2">
        <div className="container-pop">
          <div>
            <h2 className="title-span"> IP Address </h2>
            <p> {ip} </p>
          </div>
          <div>
            <h2 className="title-span"> Location </h2>

            <p>
              {city}, {country}
            </p>

            <p> {postalCode} </p>
          </div>

          <div>
            <h2 className="title-span"> Timezone </h2>
            <p> UTC {timezone} </p>
          </div>

          <div>
            <h2 className="title-span"> ISP </h2>
            <p> {isp} </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Results;

我无法进行的是它们之间的通信，例如：我进行了Google IP搜索8.8.8.8，控制台将信息返回给我，但我无法将此信息传递给Results.js，以获取它们并将它们打印在画布上。如果我在同一组件（Search.js）中执行此操作，则它会显示在屏幕上，但是CSS的样式会变得混乱。有没有办法在这两个组件之间进行这种通信？

电流输出

预期产量