Question

我有一个 Link 路由器，可以像这样将我从一个页面带到另一个页面：

  <Link
  to={{
    pathname: `/details/${submission.id}`,
    state: { mySubmission: submission }
  }}>

此链接将我带到另一个名为“详细信息”的页面。我想传入我从页面链接创建的对象到我的详细信息页面

我正在尝试获取存储在 mySubmission 中的信息，但我成功了，任何帮助将不胜感激

下面是我的详细信息页面

class Details extends React.Component {
   componentDidMount() {
    const { match: { params } } = this.props;
  
    axios.get(`/details/${params.userId}`)
      .then(({ data: user }) => {
        console.log('user', user);
  
        this.setState({ user });
      });
  }
  //let currentSubmission;
  //var currentSubmission = props.location.state.mySubmission;
  //let var = this.props.location.state;

    render() {
        return (

    <React.Fragment> 
      <Carousel>
        <Carousel.Item>
          <img src={logo}  alt="logo"/>
        </Carousel.Item>
        <Carousel.Item>
          <img src={logo}  alt="logo"/>  
        </Carousel.Item>
        <Carousel.Item>
          <img src={logo}  alt="logo"/>
        </Carousel.Item>
      </Carousel>

        {/*Right now everything is hard coded but should be passed in as props in future */}
      <div className="card-body">
        <h1 className="title-event">{}</h1>
        <br></br>
        <h2 className="title-location">Kiev, Ukraine</h2>
        <br></br>
        <h1>{this.props.location.state}</h1> {/*not working */}

最后，我想在详细信息页面中显示对象的字段。

先谢谢你！！！

PS：这是我获得状态属性的 Link API，表示我可以将对象传递给 Link

Answer 1

我认为您需要用 withRouter 包装您的组件才能正确接收状态。

然后您从 props.location.state

获取信息

检查this sandbox

从类组件中的链接状态访问对象

1 个答案: