Question

我尝试像这样通过历史记录推送来发送数据。

然后，我尝试获取发送的id的值。

问题是当第一次渲染组件时，我得到了undefined的值。然后，当我单击浏览器上的上一个按钮时，便得到了该值。为什么会发生??????

Answer 1

缺少默认状态，因此请使用componentDidMount生命周期并在componentDidMount内部调用默认状态。

Answer 2

在网址中发送参数。

定义路线

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

，然后在组件中，您可以通过以下方式获取ID props.match.params.id

Answer 3

如果我能看到您如何编写组件，这将有所帮助。

要使此代码正常工作，这应该有所帮助。

app/src/two

Answer 4

您可以将state传递给push方法作为第二个参数，push(url, state)而不是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} />
}

然后访问状态

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

  return <LoginBigOrSmallComponent onClick={handleClick} />
}

History objects通常具有以下属性和方法：

长度-（数字）历史记录堆栈中的条目数
action-（字符串）当前操作（PUSH，REPLACE或POP）
位置-（对象）当前位置。可能具有以下属性：
- 路径名-（字符串）URL的路径
- 搜索-（字符串）URL查询字符串
- 哈希-（字符串）URL哈希片段
- 状态-（对象）特定于位置的状态，例如提供给推（路径，状态）何时将该位置推入堆栈。仅在浏览器和内存历史记录。
push（path，[state]）-（函数）将新条目推入历史记录堆栈
replace（path，[state]）-（函数）替换历史记录中的当前条目堆栈
go（n）-（函数）将历史记录堆栈中的指针移动n个条目
goBack（）-（函数）等效于go（-1）
goForward（）-（函数）等效于go（1）
阻止（提示）-（功能）阻止导航（see the history docs）

如何在反应中从prop.location.state获取数据？

4 个答案: