反应不识别参数？答案

【问题标题】：react is not recognizing params?反应不识别参数？
【发布时间】：2019-03-16 04:33:06
【问题描述】：

所以在反应中，我有一个 App 组件正在渲染几个子组件，如下所示：

应用程序

render() {
    return (
      //JSX inside
      <BrowserRouter>
        <div>
          <Header />
          <Switch>
            <Route exact path="/" component={Courses} />
            <Route exact path="/courses/create"  component={() => <CreateCourse email={this.state.emailAddress} pass={this.state.password} />} />
            <Route exact path="/courses/:id/update" component={() => <UpdateCourse email={this.state.emailAddress} pass={this.state.password} />} />
            <Route exact path="/courses/:id" component={() => <CourseDetail email={this.state.emailAddress} pass={this.state.password} />} />
            <Route exact path="/signin" component={ () => <UserSignIn signIn={this.signIn}/>} /> {/*pass in the signIn() in a prop called signIn to the UserSignIn component*/}
            <Route exact path="/signup" component={UserSignUp} />
            {/* <Route exact path="/signout" component={UserSignOut} /> */}
          </Switch>
        </div>
      </BrowserRouter>
    );
  }

在这个组件中，我有参数，这样我就可以通过它的 id 查看课程：

课程详情

componentDidMount() {
    const {match: { params }} = this.props; //I used a code snippet from this video https://scotch.io/courses/using-react-router-4/route-params
    //fetch data from API
    axios
      .get(`http://localhost:5000/api/courses/${params.id}`)
      .then(results => {
        //results param came back as data from api
        this.setState({
          //set state by setting the courses array to hold the data that came from results
          course: results.data,
          user: results.data.user
        });
        //console.log(results); //By console logging I was able to see that I am getting each individual course's info in the data object
      });
  }

  //this method will be for deleting a course
  handleDelete() {
    const { match: { params }, history } = this.props;

    axios.delete(`http://localhost:5000/api/courses/${params.id}`, {
    auth: {
      username: this.props.email,
      password: this.props.pass
   }
  }).then(() => {
      history.push("/"); //I used the history object and have it push to the homepage, that way every time I delete a course I am redirected to (/) afterwards
    });
  }

当我尝试导航到使用参数的 CourseDetail 组件时遇到的错误是：

有人可以帮忙吗？

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

你需要像read here这样传递props

component={props => <CourseDetail {...props} email={this.state.emailAddress} pass={this.state.password} />} />

传递给 courseDetails 组件的道具没有任何道具名称 match 并且在您的 componentDidMount 中您正在这样做

const {match: { params }} = this.props;

这里的匹配是未定义的，所以你可以访问params

你可以通过这个例子理解

let a = {a:{b:1}}

let {x:{b,}} = a

以上代码与以下相同

"use strict";

var a = {
  a: {
    b: 1
  }
};
var b = a.x.b;

因此，如果在解构过程中，如果您没有匹配作为您尝试访问的参数，那么最终在这里

(this.props.match).params
         |
         |__________ This is undefined  you end up `undefined.params`

【讨论】：

【解决方案2】：

Match 未定义，因为您没有将它作为道具传递给组件。

这样做

<Route exact path="/courses/:id/update" component={(routeProps) => <UpdateCourse email={this.state.emailAddress} pass={this.state.password} routeProps = {routeProps} />} />

然后您可以通过以下方式获取您的 Match 属性 routeProps。

const {match} = this.routeProps;

或者简单地使用 property spread notation，它将 routeProps 中的属性作为组件中的离散属性展开。

例子，

<Route exact path="/courses/:id/update" component={(routeProps) => <UpdateCourse email={this.state.emailAddress} pass={this.state.password} {...routeProps} />} />

这相当于写-

<Route exact path="/courses/:id/update" component={(routeProps) => <UpdateCourse email={this.state.emailAddress} pass={this.state.password} Match = {this.routeProps.Match} Location = {this.routeProps.Location}/>} History = {this.routeProps.History />

【讨论】：

【解决方案3】：

当你写这篇文章时

const {match: { params }} = this.props;

这意味着你期望 props 有一个 match 属性，如下所示：

params = this.props.match.params;

这就是您收到指定错误的原因。

如果你想分配一个变量，道具使用这个

const params = props;

注意：[如果你用方括号 const {match} = props; 包围一个变量，这意味着你期望在 props 中有一个键匹配。

【讨论】：