如何在反應中從 prop.location.state 獲取數據？

Question

我嘗試像這樣通過歷史推送發送數據。

然后我嘗試獲取我發送的 id 的值。

問題是當第一次渲染組件時，我得到了 undefined 的值。 然后當我單擊瀏覽器上的上一個按鈕時，我得到了值。 為什么會發生？？？

Answer 1

缺少默認 state，因此使用 componentDidMount 生命周期和內部 componentDidMount 調用默認 state。

Answer 2

在 url 中發送參數。

定義路線

 <Route path="/bookingform/:id" component={BookingForm} />

然后在組件中你可以通過 props.match.params.id 獲取 id

Answer 3

如果我能看到您是如何編寫組件的，那將會有所幫助。

要使此代碼正常工作，這應該會有所幫助。

<Route exact path="" render= {routeProps => (<theComponent {...routeProps} />)}

Answer 4

您可以將state作為第二個參數傳遞給push方法， push(url, state) not push({ pathname, state}) 。示例如下

// Home.jsx
const Home = (props) => {
  // the second value in push method is the state
  handClick = () => props.history.push('/login', { comingFromHome: true })
  return <HomeBigOrSmallComponent onClick={handleClick} />
}

然后，訪問 state

// Login.jsx
const Login = (props) => {
  // now let's log our state
  useEffect(() => console.log(props.history.location.state.comingFromHome), [])

  return <LoginBigOrSmallComponent onClick={handleClick} />
}

歷史對象通常具有以下屬性和方法：

• length - (number) 歷史堆棧中的條目數
• action -（字符串）當前操作（PUSH、REPLACE 或 POP）
• location -（對象）當前位置。 可能具有以下屬性：
  • pathname - (string) URL 的路徑
  • search - (string) URL 查詢字符串
  • hash - （字符串）URL hash 片段
  • state - （對象）特定於位置的 state，當此位置被推入堆棧時，提供給例如 push(path, state)。 僅在瀏覽器和 memory 歷史記錄中可用。
• push(path, [state]) - (function) 將新條目推送到歷史堆棧
• replace(path, [state]) - (function) 替換歷史堆棧上的當前條目
• go(n) - (function) 將歷史堆棧中的指針移動 n 個條目
• goBack() - (函數) 等價於 go(-1)
• goForward() - (函數) 等價於 go(1)
• block(prompt) - (function) 阻止導航（ 參見歷史文檔）