從另一個功能組件訪問一個功能組件狀態

測驗.js

import React from 'react';
import {useState} from 'react';
import {useNavigate} from "react-router-dom";

function Quiz () {
  const [monthState, setMonth] = useState("");
  const [dayState, setDay] = useState("");
  const [signState, setSign] = useState("");
let navigate = useNavigate();

function CalcSign() 
{
  if((monthState == 'mar' && dayState > 20)|| (monthState == 'apr' && dayState <= 19))
  {
    setSign("Aries");
    return (<> </>);
  }
  else if((monthState == 'apr' && dayState > 19)|| (monthState == 'may' && dayState <= 20))
  {
    setSign("Taurus");
    return (<> </>);
  }
  else if((monthState == 'may' && dayState > 20)|| (monthState == 'jun' && dayState <= 20))
  {
    setSign("Gemini");
    return (<> </>);
  }
  else if((monthState == 'jun' && dayState > 20)|| (monthState == 'jul' && dayState <= 22))
  {
    setSign("Cancer");
    return (<> </>);
  }
  else if((monthState == 'jul' && dayState > 22)|| (monthState == 'aug' && dayState <= 22))
  {
    setSign("Leo");
    return (<> </>);
  }
  else if((monthState == 'aug' && dayState > 22)|| (monthState == 'sep' && dayState <= 22))
  {
    setSign("Virgo");
    return (<> </>);
  }
  else if((monthState == 'sep' && dayState > 22)|| (monthState == 'oct' && dayState <= 22))
  {
    setSign("Libra");
    return (<> </>);
  }
  else if((monthState == 'oct' && dayState > 22)|| (monthState == 'nov' && dayState <= 21))
  {
    setSign("Scorpio");
    return (<> </>);
  }
  else if((monthState == 'nov' && dayState > 21)|| (monthState == 'dec' && dayState <= 21))
  {
    setSign("Sagitarius");
    return (<> </>);
  }
  else if((monthState == 'dec' && dayState > 21) || (monthState == 'jan' && dayState <= 19))
    {
      setSign("capricorn");
      return (<> </>);
    
    }
  else if((monthState == 'jan' && dayState > 19)|| (monthState == 'feb' && dayState <= 18))
  {
    setSign("Aquarius");
    return (<> </>);
  }
  else if((monthState == 'feb' && dayState > 18)|| (monthState == 'mar' && dayState <= 20))
  {
    setSign("Pisces");
    return (<> </>);
  }

    else
    {setSign("not");
       return (<p>You didn't enter your birthday correctly</p>);}  
  }
  
return (
    <div>
    <label for="quiz">Please select your birthday</label>
<select name="month" id="month" onChange = {(e) => 
  {const selectedMonth = e.target.value;
   setMonth(selectedMonth);}}>  

  <option value="defaultMonth">Birth month</option>
  <option value="jan">January</option>
  <option value="feb">February</option>
  <option value="mar">March</option>
  <option value="apr">April</option>
  <option value="may">May</option>
  <option value="jun">June</option>
  <option value="jul">July</option>
  <option value="aug">August</option>
  <option value="sep">September</option>
  <option value="oct">October</option>
  <option value="nov">November</option>
  <option value="dec">December</option>
</select>

<select name="day" id="day" onChange = {(e) => 
  {const selectedDay = e.target.value;
   setDay(selectedDay);}}>

  <option value="defaultDay">select a day</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
  <option value="26">26</option>
  <option value="27">27</option>
  <option value="28">28</option>
  <option value="29">29</option>
  <option value="30">30</option>
  <option value="31">31</option>
</select>

<CalcSign/> 
        <button type = "button" onClick = {() => {navigate("/result");}} >What's my sign</button>
        {dayState} //show that the assignment works properly
        {signState} //show that the assignment works properly
    </div>
  );
}
export default Quiz; 

結果.js

import React from 'react';
import Quiz from "./Quiz";

function Result() {
 const displaySign = (props) => {
    return (<p>{props.signState} </p>)
  } 
 

return (
    <div>
        <h2>Your result is </h2> 
        <div> {displaySign(<Quiz/>)}</div>
      
    </div>
  );
}
export default Result; 

我也試過<p> {signState} </p>和<p><Quiz signState/> </p>下<h2> Your result is </h2>

uj5u.com熱心網友回復：

您需要通過navigate('/result')呼叫傳遞一個狀態物件。換句話說，將該行更改為onClick = {() => navigate('/result', { signState })}. 在您的 Result 組件中，如果它不是直接的 Route ，您可能需要呼叫useLocation鉤子來讀取狀態。

import React from 'react';
import Quiz from "./Quiz";

function Result() {
 const location = useLocation();
 const { signState } = location.state;
 

return (
    <div>
        <h2>Your result is </h2> 
        <div>{signState}</div>
    </div>
  );
};

export default Result; 

uj5u.com熱心網友回復：

為了簡單地解決您需要通過路由轉換將一些值傳遞到"/result"頁面的問題，請signState在路由狀態中傳遞狀態。

使用導航

declare function useNavigate(): NavigateFunction;

interface NavigateFunction {
  (
    to: To,
    options?: { replace?: boolean; state?: any }
  ): void;
  (delta: number): void;
}

使用第二個引數 ,options發送路由狀態。

<button
  type="button"
  onClick={() => {
    navigate("/result", { state: { signState } });
  }}
>
  What's my sign
</button>

通過location物件訪問接收組件上的路由狀態。

使用地點

declare function useLocation(): Location;

interface Location<S extends State = object | null>
  extends Path {
  state: S;
  key: Key;
}

import { useLocation } from 'react-router-dom';

function Result() {
  const { state } = useLocation();

  return (
    <div>
      <h2>Your result is </h2> 
      <div>
        <p>{state.signState}</p>
      </div>
    </div>
  );
}

標籤：

上一篇：如何根據用戶權限捕獲inactivityDelay

下一篇：未捕獲的型別錯誤：物件不可迭代（無法讀取屬性Symbol(Symbol.iterator)）