通过其他组件后位置/城市值未定义，然后渲染页面变为空白..有什么解决方案吗？

Question

我有两个组件“搜索”和“Maindata”。我将输入值从搜索组件传递到 maindata 组件，我想在其中将城市属性替换为 API 中的输入值（位置）。但浏览器显示一片空白，控制台给出未定义的“城市”错误等。如果有人有解决方案，我就陷入了这个问题？

这里是“搜索”组件；

import React , {useState} from "react";
import Maindata from "./Maindata";
import "../Componentstyle/search.css";
export default function Search() {
  const [location, setLocation] = useState();
  <Maindata city={location}/>
  
  return (
    <div className="main">
      <nav className="istclass">
        <form className="form">
          <div className="search">
            <input
              value={location}
              placeholder="search city"
              className="searchbox"
              onChange={(e)=>setLocation(e.target.value)}
            />
            
            <button className="nd" onClick={(e)=>setLocation(e.target.value)}>
              Submit
            </button>
          </div>
        </form>
      </nav>
    </div>
  );
}

这里是“Maindata”组件；

import React, { useState, useEffect } from "react";
import "../Componentstyle/Main.css";
export default function Maindata(props) {
  const [data, setData] = useState(null);
  
let city = console.log(props.city);
  let weather = async () => {
    const key = "1ab6ef20384db1d7d9d205d609f7eef0";
    await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${key}&units=metric&formatted=0`
    )
      .then((response) => response.json())
      .then((actualData) => setData(actualData));
  };
  useEffect(() => {
    weather();
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  const link = `http://openweathermap.org/img/w/${data.weather[0].icon}.png`;

  return (
    <div className="maindata">
      <div className="city">{data.name}</div>
      <div className="temp">{data.main.temp} C</div>
      <div className="icon">
        <img src={link} alt="not found" />{" "}
      </div>
      <div className="feel">feels Like {data.main.feels_like} C</div>
      <div className="wind">Wind {data.wind.speed} Km/hr</div>
      <div className="cloudy">{data.weather[0].main}</div>
      <div className="humidity">humidity {data.main.humidity}%</div>
      <div className="sunrise">
        sunrise :- {new Date(data.sys.sunrise * 1000).toUTCString()}{" "}
      </div>
      <div className="sunset">
        sunset :- {new Date(data.sys.sunset * 1000).toUTCString()}
      </div>
    </div>
  );
}

Answer 1

<Maindata city={location}/>

将此行代码保留在返回值中

Answer 2

在您的示例中，

Search

和

Maindata

组件之间没有任何有意义的联系。意味着

Maindata

组件不会在页面上渲染，因为它不在

return

组件的

Search

语句中。

下面的

Maindata

组件采用 JSX 格式，当您在 React 代码中使用 JSX 时，在幕后，会调用

React.createElement()

方法。

每次调用 React.createElement 都会返回一个对象，描述要渲染到页面该部分的内容。因此，将

Maindata

组件放在

return

语句中是有意义的。当您加载包含该组件的页面时，它负责渲染该组件中的 HTML 元素。

<Maindata city={location}/> // is JSX and should be in the return statement to get rendered on the page and showing the right location