无法从链接接收道具 [重复]答案

【问题标题】：Cannot receive props from Link [duplicate]无法从链接接收道具 [重复]
【发布时间】：2019-09-10 02:53:02
【问题描述】：

我正在学习 react 并试图通过 Link 将一个 prop（命名为 classId）传递给另一个组件（ClassPage.js），但是我无法接收到该 prop，并且它返回未定义。感谢您的宝贵时间，非常感谢。

App.js - 我想在我的 ClassPage 组件中访问 classId（从 ClassList 中的链接）

<Route path="/classpage/:classId" exact render={() => <ClassPage isLoggedIn={this.state.isLoggedIn} user={this.state.user}/>} />

ClassList.js - 尝试通过 Link 将数据传递给 ClassPage 组件

import React, { Component } from "react";
import { Link } from "react-router-dom";
import "./ClassList.css";

class ClassList extends Component {

render() {

console.log(this.props.classId); //recived
console.log(this.props.classTitle); //recived
console.log(this.props.classDescription); //recived
console.log("click link and direct to Class Page");


// Problem located in here, try to pass data to ClassPage.js
return (
    <div>
    <Link to={"/classpage/"+this.props.classId}> 

      <h3 className="titleStyle">{this.props.classTitle}</h3> 

    </Link>
        <div className="row">
      <div className="col-sm-6 text-secondary">
        Instructor: {this.props.instructor}
      </div>
      <div className="col-sm-6 text-secondary">
        Meeting day: {this.props.meetingDay}
      </div>
    </div>
    </div>
);
}
}

export default ClassList;

ClassPage.js - 无法从 ClassList 组件接收 classId

import React from 'react';
import Navbar from "../Components/Navbar.js";
import Footer from "../Components/Footer.js";
import PostTable from "../Components/PostTable.js";


class ClassPage extends React.Component {
  constructor(props) {
    super(props);

    console.log("class ID");
    console.log(this.props.classId); //Problem located in here
    //cannot receive - this.props.classId

    this.state  = {
      classPostsData: []
    };
  }

componentDidMount() {
    fetch("https://api.myjson.com/bins/jfuqc") 
    // fetch from localhost by this.props.classId
        .then(data => data.json())
        .then(data => this.setState({classPostsData: data}))
  }

render() {
    return(
      <div>
        <Navbar isLoggedIn={this.props.isLoggedIn} />

        <h1>{this.props.classTitle}</h1> 
        <p>{this.props.classDescription}</p>
        {this.state.classPostsData.map(post => {
          return (
            <PostTable
              key={post.post_ID}
              post_ID={post.post_ID}
              post_Title={post.post_Title}
              post_note={post.post_note}
            />
          );
        })}
        <Footer isLoggedIn={this.props.isLoggedIn} />
      </div>
    );
  }
}

export default ClassPage;

更新：

类列表.js

const toClassPage = {
   pathname: "/classpage/" + this.props.classId,
   state: {
            classId: this.props.classId,
            classTitle: this.props.classTitle,
            classDescription: this.props.classDescription 
          }
}

<Link to={toClassPage}>
      <h3 className="titleStyle">{this.props.classTitle}</h3> 
</Link>

ClassPage.js

constructor(props) {
    super(props);

    console.log("class ID/Title/Description");
    console.log(this.props.location.state.classId);
    console.log(this.props.location.state.classTitle);
    console.log(this.props.location.state.classDescription);

    this.state  = {
        classPostsData: []
    };
}

Chrome 出错：

TypeError: Cannot read property 'state' of undefined
new ClassPage
src/Pages/ClassPage.js:13

   10 | super(props);
   11 | 
   12 | console.log("class ID/Title/Description");
 > 13 | console.log(this.props.location.state.classId);
      | ^  14 | console.log(this.props.location.state.classTitle);
   15 | console.log(this.props.location.state.classDescription);
   16 |

【问题讨论】：

嗨@kamzy，请准确添加您在代码中使用console.log 的位置。尝试使用 this.props。根据有限的信息，我们不知道您的代码设置，因此很难解决问题所在。首选完整的文件页面，以便我们可以看到完整的图片。
@RogerPerez 我已经编辑了我的问题。希望它能提供更好的理解。谢谢

标签： reactjs routes react-props

【解决方案1】：

您不需要根据您的路线访问类 ID。你可以把它从href中撕下来。

let id = window.location.href.split("/")[window.location.href.split("/").length -1];

如果您只需要地址栏中的 id，上面的代码应该可以解决问题。

如果您需要的不仅仅是类 id，您还可以通过链接将道具传递给状态。

   <Link to={{
      pathname: `/classpage/${this.props.classId}`,
      state: {
        classId: this.props.classId,
        title: this.props.classTitle,
        description: this.props.classDescription 
      }
    }}>
<h3 className="titleStyle">{this.props.classTitle}</h3> 
</Link>

然后您将通过 this.props.location.state 访问它

【讨论】：

感谢您的评论。我明白了你的想法，但实际上我也想通过链接将 ClassList 中的 classTitle 和 classDescription 传递给 ClassPage，所以我可以在 ClassPage 的渲染下的
中使用它们
我已添加到我的回复中，希望对您有所帮助
感谢您的回复，但是当我尝试通过 this.props.location.state 访问时，我的浏览器给了我一个错误。我已经用新代码更新了我的问题并显示了 chrome 的错误。我很沮丧，已经卡了几个小时了

【解决方案2】：

我遵循了这个例子，最后它运行良好。感谢您的帮助

Cannot read property ‘params’ of undefined (React Router 4)

【讨论】：

中使用它们