[英]React passing a prop to components return undefined
我真的很困惑為什么當我路由到我的項目的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"}/>} />
在沒有看到您的其余代碼的情況下,我將假設 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
正如 Randy Casburn 在評論中所說,您的參考應該是props.gradeSelection
而不是this.props.gradeSelection
。
Props 是作為構造函數的輸入接收的(即constructor(props)
),因此應該這樣引用。 如果您需要在渲染之前對其進行操作或在本地管理它,您可以將其傳遞給構造函數中Subject
的狀態。
你可以使用像:
//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)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.