如何將數據輸入從一個組件傳遞到另一個組件？

Question

介紹問題

我是初學者ReactJS 學習者使用 OpenWeather API 開發一個簡單的天氣應用程序。 該應用程序旨在從兩個組件中獲取數據：一個返回用戶輸入的當前天氣，另一個返回未來 5 天的天氣預報。

在輸入字段中輸入城市名稱時，控制台上會顯示以下消息：

GET https://api.openweathermap.org/data/2.5/weather?q=undefined&units=metric&appid=fc8975bd4701139dcd78e2e288cc3807 400（錯誤請求）

我不知道如何將數據從搜索組件傳遞到應用程序組件。 說真的，我嘗試了很多替代方案，但都沒有成功。 有注釋的代碼行顯示我到目前為止的最后一次嘗試。

（忽略 ForecastWeather，因為該組件為空）

我知道你們所有人都很忙，但我會以尊重的方式感謝您的幫助。 甚至對我必須學習的內容（例如callBack）的建議也是受歡迎的。 我已經嘗試過了：

https://stackoverflow.com/questions/56943427/whether-to-save-form-input-to-state-in-onchange-or-onsubmit-in-react

https://sebhastian.com/react-onchange/

代碼轉發如下：

應用程序.js

import React, { useState } from "react";
import { Api } from "./Api";
import {
  Search,
  CurrentWeather,
  ForecastWeather,
  Footer,
} from "./components/index";
import "./App.css";

function App() {
  const [getCity, setGetCity] = useState();
  const [weatherData, setWeatherData] = useState(null);
  const [forecastData, setForecastData] = useState(null);

  const handleSearchLocation = (dataSearch) => {
    const weatherDataFetch = fetch(
      `${Api.url}/weather?q=${getCity}&units=metric&appid=${Api.key}`
    );
    const forecastDataFetch = fetch(
      `${Api.url}/forecast?q=${getCity}&units=metric&appid=${Api.key}`
    );

    Promise.all([weatherDataFetch, forecastDataFetch])
      .then(async (response) => {
        const weatherResponse = await response[0].json();
        const forecastResponse = await response[1].json();

        setGetCity(dataSearch);
        setWeatherData(weatherResponse);
        setForecastData(forecastResponse);
      })
      .catch(console.log);
  };

  return (
    <div className="App">
      <Search
        searchResultData={handleSearchLocation}
        textPlaceholder="Search for a place..."
      />
      {weatherData && <CurrentWeather resultData={weatherData} />}
      <ForecastWeather resultData={forecastData} />
      <Footer />
    </div>
  );
}

export default App;

搜索.jsx

import React, { useState } from "react";

function Search({ textPlaceholder, searchResultData }) {
  const [searchCity, setSearchCity] = useState("");

  //const handlerOnChange = ( event, dataSearch ) => {
  //setSearchCity(event.target.value);
  //setSearchCity(dataSearch);
  //searchResultData(dataSearch);
  //};

  return (
    <div className="componentsBoxLayout">
      <input
        value={searchCity}
        //onChange={handlerOnChange}
        onChange={(event) => setSearchCity(event.target.value)}
        onKeyDown={(event) => event.key === "Enter" && searchResultData(event)}
        placeholder={textPlaceholder}
      />
    </div>
  );
}

export default Search;

當前天氣.jsx

import React from "react";

function CurrentWeather({ resultData }) {
  return (
    <div className="componentsBoxLayout">
      <p>{resultData.name}</p>
    </div>
  );
}

export default CurrentWeather;

ForecastWeather.jsx（空）

import React from 'react';

function ForecastWeather() {
  return (
    <div className="componentsBoxLayout">ForecastWeather</div>
  )
}

export default ForecastWeather;

Api.js

const Api = {
  url: "https://api.openweathermap.org/data/2.5",
  key: "fc8975bd4701139dcd78e2e288cc3807",
  img: "https://openweathermap.org/img/wn",
};

export { Api };

Yippee-ki-yay

Answer 1

您不能在此 function 中使用 getCity：

const handleSearchLocation = (dataSearch) => {
    const weatherDataFetch = fetch(
      `${Api.url}/weather?q=${getCity}&units=metric&appid=${Api.key}`
    );
    const forecastDataFetch = fetch(
      `${Api.url}/forecast?q=${getCity}&units=metric&appid=${Api.key}`
    );

    Promise.all([weatherDataFetch, forecastDataFetch])
      .then(async (response) => {
        const weatherResponse = await response[0].json();
        const forecastResponse = await response[1].json();

        setGetCity(dataSearch);
        setWeatherData(weatherResponse);
        setForecastData(forecastResponse);
      })
      .catch(console.log);
  };

getCity 是在 function 上定義的，因此當您嘗試使用它時它不存在，除非您稍后需要 getCity 用於另一個組件，否則我將刪除它，因為它是多余的並執行以下操作：

const handleSearchLocation = (dataSearch) => {
    const weatherDataFetch = fetch(
      `${Api.url}/weather?q=${dataSearch}&units=metric&appid=${Api.key}`
    );
    const forecastDataFetch = fetch(
      `${Api.url}/forecast?q=${dataSearch}&units=metric&appid=${Api.key}`
    );

    Promise.all([weatherDataFetch, forecastDataFetch])
      .then(async (response) => {
        const weatherResponse = await response[0].json();
        const forecastResponse = await response[1].json();

        setWeatherData(weatherResponse);
        setForecastData(forecastResponse);
      })
      .catch(console.log);
  };

當您在搜索組件上運行 searchResultData 時，您會發送您正在尋找的城市。 請記住，useState 將觸發重新渲染，但如果 state 更改，則之前已經運行的 function 將永遠不會獲得 state 的新值