React 将 prop 传递给组件返回 undefined

Question

我真的很困惑为什么当我路由到我的项目的http://localhost:3000/subjects/physics时。

变量gradeSelection 在App.js 状态中定义。 它通过 props 作为gradeSelection 传递给subjectCards.js 组件，后者通过props 作为gradeSelection 将它传递给Subject.js 组件。

然而，Subjects.js 中的 this.props.gradeSelection 返回 undefined。

我可能做错了什么吗？

控制台输出：

App.js: Year 12             // correct
subjectCards.js: Year 12    // correct
Subject.js: undefined       // not correct

应用程序.js

constructor(props) {
  super(props);
  this.state = {
    gradeSelection: "Year 12"
  };
}

render() {
  console.log("App: "+this.state.gradeSelection)
  return (
    <Route path="/subjects" render={(props)=>(<SubjectCards {...props}  gradeSelection={this.state.gradeSelection} />)} />
);


}

主题卡片.js

let display;

console.log("subjectCards.js: "+props.gradeSelection)
display = <Route path="/subjects/:subjectName" render={(props)=><Subject {...props} gradeSelection={props.gradeSelection}/>} />


return (
  display
);

主题.js

constructor(props) {
  super(props);
  console.log("Subject.js: "+this.props.gradeSelection);  // undefined
}

谢谢！

编辑：

当 Subjects.js 构造函数中的 console.log(props) 或 console.log(this.props) 时。 控制台输出中的 gradeSelection 仍然未定义..

我试过将一个字符串传递给 subjectCards.js 中的 gradeSelection 并且控制台输出在返回 Subject.js 中的字符串时是正确的。

display = <Route path="/subjects/:subjectName" render={(props)=><Subject {...props} gradeSelection={"props.gradeSelection"}/>} />

Answer 1

在没有看到您的其余代码的情况下，我将假设 subjectCards.js 是一个看起来像这样的功能组件。 如果不是，您能否发布完整的组件？

function SubjectCards(props) {
  let display

  console.log('subjectCards.js: ' + props.gradeSelection)

  display = (
    <Route
      path="/subjects/:subjectName"
      render={props => (
        <Subject {...props} gradeSelection={props.gradeSelection} />
      )}
    />
  )

  return display
}

在您的特定用例中，我看到这段代码的错误在于，在第 1 行，您有一个名为props的参数。 如果您按照代码向下到第 9 行，您会注意到render中的匿名函数调用也有一个props参数。 在第 10 行，您正在调用props.gradeSelection ，它将查看第 9 行中找到的参数而不是第 1 行中找到的参数，从而为您提供 undefined。

有几种不同的方法可以解决这个问题。 我推荐的一种方法是在第 1 行解构你的论点props 。

function SubjectCards({ gradeSelection }) { // See how we went from props to {gradeSelection}
  let display

  console.log('subjectCards.js: ' + gradeSelection)

  display = (
    <Route
      path="/subjects/:subjectName"
      render={props => <Subject {...props} gradeSelection={gradeSelection} />}
    />
  )

  return display
}

你可以在https://mo9jook5y.codesandbox.io/subjects/math 上看到一个例子

你可以在这里玩这个例子： https : //codesandbox.io/s/mo9jook5y

Answer 2

正如 Randy Casburn 在评论中所说，您的参考应该是props.gradeSelection而不是this.props.gradeSelection 。

Props 是作为构造函数的输入接收的（即constructor(props) ），因此应该这样引用。 如果您需要在渲染之前对其进行操作或在本地管理它，您可以将其传递给构造函数中Subject的状态。

Answer 3

你可以使用像：

//subjectCards.js
render={({gradeSelection, ...other}) => <Subject {...other} 
      gradeSelection={gradeSelection}/>}

//Subject.js
console.log(props.gradeSelection)

但是等等，你可以简单地传递道具，它有你需要的一切（包括等级选择）：

//subjectCards.js
render={(props) => <Subject {...props} />}

//Subject.js
console.log(props.gradeSelection)