如何將輸入值從一個組件傳遞到另一個組件（api和資料顯示代碼所在的位置）？如何在2個組件之間建立連接？

我有兩個組件，其中一個組件提供搜索輸入欄位，用戶將在其中輸入資料（例如城市名稱），另一個組件提供主要天氣資料（基于組件 1 的用戶搜索輸入），如溫度、風等。 . 我應該如何將用戶輸入傳遞給 API，以便它呈現該城市的資料。在過去的 3 天里，我一直被困在這個問題上。任何解決方案？

Comp1（搜索補償）

import React, { useState } from "react";
import "../Componentstyle/search.css";
export default function Search() {
  const [location, setLocation] = useState();
  
const handlesubmit = (event)=>{
  event.preventDefault();
  setLocation(event.target.value)
}
  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" type="button" onClick={handlesubmit}>
              Submit
            </button>
          </div>
        </form>
      </nav>
    </div>
    </>
  );
}

Comp2（主資料補償）

import React, { useState, useEffect } from "react";
import "../Componentstyle/Main.css";
export default function Maindata() {
  const [data, setData] = useState();


  let city = "mansehra";

  let weather = async () => {
    // if(!city)return;
    const key = "XYZ";
    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>
    </>
  );
}

App.js 比較

import "./App.css";
import Maindata from "./Components/Maindata";
import Search from "./Components/Search";



function App() {
  
  return (
    <div className="mainpage">
      <div className="searchComp">
        <Search />
      </div>
      <div className="details">
        <Maindata />

  );
}

export default App;

uj5u.com熱心網友回復：

您可以簡單地Lift State Up。將Search組件的狀態向上移動到一個共同的祖先組件，并將狀態和狀態更新回呼函式作為道具向下傳遞給需要它們的組件。

例子：

應用程式

function App() {
  const [location, setLocation] = useState();

  return (
    <div className="mainpage">
      <div className="searchComp">
        <Search {...{ location, setLocation }} />
      </div>
      <div className="details">
        <Maindata city={location} />
      </div>
    </div>
  );
}

搜索

export default function Search({ location, setLocation }) {
  const handlesubmit = (event) => {
    event.preventDefault();
    setLocation(event.target.value);
  };

  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" type="button" onClick={handlesubmit}>
              Submit
            </button>
          </div>
        </form>
      </nav>
    </div>
  );
}

主要資料

export default function Maindata({ city = "mansehra" }) {
  const [data, setData] = useState();

  const weather = async (city) => {
    const key = "XYZ";
    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(() => {
    if (city) {
      weather(city); // <-- pass city through to function
    }
  }, [city]);

  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>
    </>
  );
}

uj5u.com熱心網友回復：

您可以使用背景關系 API。您將為位置創建一個背景關系。背景關系的提供者將包裝搜索組件以及執行 API 呼叫的組件（MainData？）您將在搜索組件中設定背景關系值并在 MainData 組件中獲取背景關系值。

LocationProvider可能看起來像這樣：

import React, { createContext, useState } from 'react'

export const LocationContext = createContext(null)

const LocationProvider = ({ children }) => {
  const [ location, setLocation ] = useState('')
  return (
    <LocationContext.Provider value={{location, setLocation}}>
      {children}
    </LocationContext.Provider>
  )
}

export default LocationProvider

setLocation()如果兩個組件都包含在此提供程式中，您可以SearchComponent通過匯入LocationContext然后執行以下操作來訪問：

const { setLocation } = useContext(LocationContext)

在另一個組件中，您可以以類似的方式訪問該位置：

const { location } = useContext(LocationContext)

標籤：javascript反应api反应道具反应状态

上一篇：GoogleMyBusinessAPI：未知名稱websiteUrl在位置：找不到欄位

下一篇：向API回應添加新資料