Question

我正在学习反应，正在尝试通过Link将一个prop（命名为classId）传递给另一个组件（ClassPage.js），但是我无法收到该prop，并且返回的是undefined。谢谢您的宝贵时间，谢谢。

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

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

ClassList.js-尝试通过链接将数据传递到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;

已更新：

ClassList.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 |

Answer 1

您不需要根据您的路线访问班级ID。您可以将其从href中剥离。

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

如果您只需要地址栏中的ID，则上述代码即可解决问题。

如果您不仅需要类ID，还可以通过链接将prop传递给状态。

   <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

进行访问

Answer 2

我遵循了这个示例，最终效果很好。感谢您的帮助

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

无法从链接接收道具

2 个答案: