Реагировать, передавая опору компонентам, возвращать undefined
Я действительно не понимаю, почему, когда я направляю на http: // localhost: 3000 / предметы / физика моего проекта.
Переменная GradeSelection определена в состоянии App.js. Он передается компоненту subjectCards.js через реквизиты как gradeSelection, который передает его компоненту Subject.js через реквизиты как gradeSelection.
Однако this.props.gradeSelection в Subjects.js возвращает значение undefined.
Возможно, я что-то делаю не так?
Вывод в консоль:
App.js: Year 12 // correct
subjectCards.js: Year 12 // correct
Subject.js: undefined // not correct
App.js
constructor(props) {
super(props);
this.state = {
gradeSelection: "Year 12"
};
}
render() {
console.info("App: "+this.state.gradeSelection)
return (
<Route path = "/subjects" render = {(props)=>(<SubjectCards {...props} gradeSelection = {this.state.gradeSelection} />)} />
);
}
subjectCards.js
let display;
console.info("subjectCards.js: "+props.gradeSelection)
display = <Route path = "/subjects/:subjectName" render = {(props)=><Subject {...props} gradeSelection = {props.gradeSelection}/>} />
return (
display
);
Subject.js
constructor(props) {
super(props);
console.info("Subject.js: "+this.props.gradeSelection); // undefined
}
Спасибо!
Обновлено:
Когда console.info (props) или console.info (this.props) в конструкторе Subjects.js. GradeSelection внутри вывода консоли все еще не определено.
Я пробовал передать строку в gradeSelection в subjectCards.js, и вывод консоли был правильным при возврате строки в Subject.js ..
display = <Route path = "/subjects/:subjectName" render = {(props)=><Subject {...props} gradeSelection = {"props.gradeSelection"}/>} />
Думаю это аналогичная проблема stackoverflow.com/questions/41496655/…
заменить this.props.gradeSelection на props.gradeSelection
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Как сказал Рэнди Касберн в комментариях, вы должны ссылаться на props.gradeSelection, а не на this.props.gradeSelection.
Props принимается в качестве входных данных для вашей функции-конструктора (например, constructor(props)), и поэтому на него следует ссылаться как на таковой. Если вам нужно манипулировать им перед рендерингом или управлять им локально, вы можете передать это состояние для Subject в конструкторе.
Когда console.info (props), gradeSelection все еще не определен. Будет ли какая-то другая причина, по которой он не определен?
Прочитав код более внимательно, кажется, что вы перезаписываете имя переменной «prop» - это область действия функции в subjectCard: display = <Route path = "/subjects/:subjectName" render = {(props)=><Subject {...props} gradeSelection = {props.gradeSelection}/>} />. Реквизиты, передаваемые компоненту Subject, - это реквизиты, определенные в вызове функции, а не переданные реквизиты. в subjectCard.js.
Вы можете использовать как:
//subjectCards.js
render = {({gradeSelection, ...other}) => <Subject {...other}
gradeSelection = {gradeSelection}/>}
//Subject.js
console.info(props.gradeSelection)
Но подождите, вы можете просто передать реквизит, в нем есть все, что вам нужно (включая GradeSelection):
//subjectCards.js
render = {(props) => <Subject {...props} />}
//Subject.js
console.info(props.gradeSelection)
Не видя остальной части вашего кода, я предполагаю, что subjectCards.js - это функциональный компонент, который выглядит следующим образом. Если нет, не могли бы вы опубликовать полный компонент?
function SubjectCards(props) {
let display
console.info('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.
Есть несколько способов исправить это. Один из способов, который я бы порекомендовал, - это деструктуризация ваш аргумент props в строке 1.
function SubjectCards({ gradeSelection }) { // See how we went from props to {gradeSelection}
let display
console.info('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
вы пробовали регистрировать это внутри метода
componentDidMount, а не конструктора?