Question

我有 app.js 作为父级，uploadlist.js 作为子级。我将 app.js 中定义的“userid”传递给uploadlist.js。这是我的尝试：

app.js :

export default class App extends Component {

  state = {

    userrole : '',
    custid   : ''

  };

componentDidMount() {

  if(localStorage.login)
  {
    const currentuser     = JSON.parse(atob(localStorage.login.split(".")[1])); 
    this.setState( {userrole: currentuser.role });
    this.setState( {custid: currentuser.id });
    
  }

}

render() {

if(this.state.userrole === "Customer"){
  const userid=this.state.custid;
  console.log(userid); //This properly returns the userid in console.
return (
//some code
<Route path="/Uploadlist" render={props => <UploadList userid={props.match.params.userid} />}/>

uploadlist.js：

export default function Uploadlist() {
const userid = this.props.userid;
    console.log(userid);

这将返回“类型错误：无法读取未定义的属性‘道具’”错误。我该如何解决这个问题？

Answer 1

Uploadlist 是一个函数组件。它没有 this - 相反，它的 props 将在传递给函数的第一个参数中，以对象的形式存在。

export default function Uploadlist({ userid }) {
  console.log(userid);

或使用类组件引用this.props

export default class Uploadlist() {
  render() {
    console.log(this.props.userid);

Answer 2

当您想将 props 传递给通过 Route 呈现的组件时，请使用 render prop 而不是 component 。

更改您的组件如下

<Route path="/Uploadlist" render={props => <UploadList userid={props.match.params.userid} />}/>

此外，您正在尝试访问 props.match.params.userid，因为您正在为路径 /Uploadlist 呈现此组件，因此此处没有 userId。但是，如果 props.match 来自呈现此 Route 的父组件，则为避免名称冲突，请将道具的名称更改为

render={routeProps => <UploadList userid={props.match.params.userid} {...routeProps} />}

现在你可以访问组件中的 props

export default function Uploadlist({ userid }) {
  console.log(userid);

参考

Route Render Function

Route component Prop

Answer 3

UploadList 是一个功能组件。您的路由在组件顶部传递值，但是当您定义 UploadList 时，您没有接受任何道具作为参数。

应该是

function UploadList(props) {
.....
}
export default UploadList;

或者像@certainperformance 的回答一样，您甚至可以使用 ES5 解构来解构 props 参数。

如果您想使用“this”，请使用基于类的组件，但这有点过时，功能组件是目前最好的方法

ReactJs |无法读取未定义的属性“道具”

3 个答案: