时间戳

首页 > 解决方案 > 使用带有 React 路由器的渲染道具时在组件中获取未定义的道具

reactjs - 使用带有 React 路由器的渲染道具时在组件中获取未定义的道具

问题描述

我正在尝试实现密码重置，当前当用户单击发送到电子邮件的链接（嵌入令牌和用户 ID）时，他被重定向到更新密码页面。所以，在UpdatePassword组件中，我得到了未定义的道具。这是代码。

在App.js

  <Route
    path="/update-password"
    render={({ match }) => (
      <UpdatePassword
        userId={match.params.userId}
        token={match.params.token}
      />
    )}
  />

UpdatePassword是一个只有两个输入字段的简单组件：

import React, { Component } from "react"

class UpdatePassword extends Component {
  constructor(props) {
    super(props)
    this.state = {
      password: "",
      confirmPassword: "",
      isSubmitted: false
    }
  }

  handleChange = event => {
    const { name, value } = event.target
    this.setState({
      [name]: value
    })
  }

  render() {
    console.log(this.props)
    return (
      <div>
        <h2 style={{ textAlign: "center" }}>Update your password</h2>
        <div className="field">
          <p className="control has-icons-left has-icons-right">
            <input
              className="input"
              onChange={this.handleChange}
              name="password"
              value={this.state.password}
              type="email"
              placeholder="Enter new password"
            />
            <span className="icon is-small is-left">
              <i className="fas fa-envelope"></i>
            </span>
            <span className="icon is-small is-right">
              <i className="fas fa-check"></i>
            </span>
          </p>
        </div>
        <div className="field">
          <p className="control has-icons-left has-icons-right">
            <input
              className="input"
              onChange={this.handleChange}
              name="confirmPassword"
              value={this.state.confirmPassword}
              type="email"
              placeholder="Confirm password"
            />
            <span className="icon is-small is-left">
              <i className="fas fa-envelope"></i>
            </span>
            <span className="icon is-small is-right">
              <i className="fas fa-check"></i>
            </span>
          </p>
        </div>
        <button onClick={this.handleSubmit} className="button is-success">
          Submit
        </button>
      </div>
    )
  }
}

export default UpdatePassword

后端路线是router.post("/receive_new_password/:userId/:token", emailController.reveiveNewPassword)

标签： reactjsreact-router

解决方案

我认为你有问题match。params可以undefined。尝试这个：

<Route
    path="/update-password"
    render={(prop1, prop2) => {
    const { match } = prop1; 
    console.log(prop1, prop2, match);
    return (
      <UpdatePassword
        userId={match.params.userId}
        token={match.params.token}
      />
    )}
  />

推荐阅读