將一部分狀態傳遞給React組件

我有一個使用 React 構建的簡單天氣應用程式。該代碼在其宣告App.js中包含以下內容：return()

<Routes>
  <Route exact path="/" element={<Form />} />
  <Route exact path="/weather/*" element={<Weather />} />
</Routes>

Form.jsx接受用戶輸入，設定為狀態，如下所示：

export default function Form() {
  const [zipCode, setZipCode] = useState('');
  const getZip = (e) => {
    e.preventDefault();
    setZipCode(e.target[0].value);
  }

  return (
    <div>
      <form onSubmit={getZip}>
        <input id="zip" />
    <label htmlFor="zip">Your Zip Code</label>
        <Link to="/Weather" role="button" type="submit" className="btn btn-primary">Enter</Link>
      </form>
  )}

Weather.jsx應該使用該郵政編碼并進行 API 呼叫以獲取天氣資料：

function Weather() {
  const { zipCode } = useParams();
  const [forecastObj, setForecastObj] = useState({});

  useEffect(() => {
    fetch(`https://apiservice.com/forecast/loc=${zipCode}`)
}

該應用程式應該顯示，并在提交郵政編碼后Form.jsx切換到。Weather.jsx當我輸入郵政編碼時，出現錯誤：GET https://apiservice.com/forecast/loc=undefined 400，因此郵政編碼未傳遞給Weather.jsx. 我通過谷歌搜索找到的大多數資源似乎都是針對舊版本的（很多this.state = state或類似的）。其他資源說要使用useParams，我已經設定好了Weather.jsx。

我錯過了什么？

uj5u.com熱心網友回復：

<Link to="/Weather" role="button" type="submit" className="btn btn-primary">Enter</Link>

您Link沒有將任何引數傳遞給Weather.jsx并且zipCode也不是靜態的，因此您無法在Weather.

如果你想有引數Weather.jsx，你可以Link用一個原始的按鈕元素替換，然后添加useHistory導航。

export default function Form() {
  const [zipCode, setZipCode] = useState('');
  const history = useHistory();
  const getZip = (e) => {
    e.preventDefault();
    setZipCode(e.target[0].value);
    history.push(`/weather?zipCode=${e.target[0].value}`)
  }

  return (
    <div>
      <form onSubmit={getZip}>
        <input id="zip" />
    <label htmlFor="zip">Your Zip Code</label>
        <button type="submit" className="btn btn-primary">Enter</button>
      </form>
  )}

如果你想zipCode隱含地作為 URL 的一部分，你可以Route像下面這樣修改

<Routes>
  <Route exact path="/" element={<Form />} />
  <Route exact path="/weather/:zipCode" element={<Weather />} />
</Routes>

Form并相應修改

export default function Form() {
  const [zipCode, setZipCode] = useState('');
  const history = useHistory();
  const getZip = (e) => {
    e.preventDefault();
    setZipCode(e.target[0].value);
    history.push(`/weather/${e.target[0].value}`)
  }

  return (
    <div>
      <form onSubmit={getZip}>
        <input id="zip" />
    <label htmlFor="zip">Your Zip Code</label>
        <button type="submit" className="btn btn-primary">Enter</button>
      </form>
  )}

uj5u.com熱心網友回復：

如果您將weather路線設定為接受 的引數，則可以使用組件zipCode中捕獲的值強制導航到那里（而不是使用鏈接） 。Form

然后在Weather組件中，您可以使用useParams.

import React, { useState } from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  useParams,
  useNavigate
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <Routes>
        <Route exact path="/" element={<Form />} />
        <Route exact path="/weather/:zipCode" element={<Weather />} />
      </Routes>
    </Router>
  );
}

function Form() {
  let navigate = useNavigate();
  const [zipCode, setZipCode] = useState("");

  const onSubmit = () => {
    navigate(`/Weather/${zipCode}`);
  };

  return (
    <form onSubmit={onSubmit}>
      <label>
        Your Zip Code{" "}
        <input id="zip" onChange={(e) => setZipCode(e.target.value)} />
      </label>
      <div>
        <button>submit</button>
      </div>
    </form>
  );
}

function Weather() {
  const { zipCode } = useParams();

  return `Weather for ${zipCode}`;
}

uj5u.com熱心網友回復：

要使用router params，您需要在宣告時正確命名它們Route path：

 <Route exact path="/weather/:zipCode" element={<Weather />} />

然后導航到正確的路線：

<Link to={`/weather/${zipCode}`} role="button" type="submit" className="btn btn-primary">Enter</Link>

現在您應該能夠在路線params上正確訪問：/weather/

  const { zipCode } = useParams();

標籤：javascript 反应 反应路由器

上一篇：jQuery全域活動非活動按鈕

下一篇：LVGL庫入門教程02-基本控制元件與互動