Реакция передачи реквизита для компонентов, возвращающих неопределенный

Question

Я действительно не понимаю, почему, когда я направляюсь на http://localhost:3000/subjects/physics моего проекта.

Переменная gradeSelection определяется в состоянии App.js.Он передается компоненту subjectCards.js через props в виде gradeSelection, который передает его компоненту Subject.js через props в виде gradeSelection.

Однако this.props.gradeSelection в Subjects.js возвращает неопределенное значение.

Возможно, я что-то не так делаю?

Вывод на консоль:

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.log("App: "+this.state.gradeSelection)
  return (
    <Route path="/subjects" render={(props)=>(<SubjectCards {...props}  gradeSelection={this.state.gradeSelection} />)} />
);


}

subjectCards.js

let display;

console.log("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.log("Subject.js: "+this.props.gradeSelection);  // undefined
}

Спасибо!

РЕДАКТИРОВАТЬ:

Когда console.log (props) или console.log (this.props) в конструкторе Subjects.js.GradeSelection внутри вывода консоли все еще не определено ..

Я попытался передать строку в gradeSelection в subjectCards.js, и вывод консоли был правильным при возврате строки в Subject.js ..

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

Answer 1

Вы можете использовать как:

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

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

Но подождите, вы можете просто пропустить реквизит, у него есть все, что вам нужно (включая gradeSelection):

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

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

Answer 2

Не видя остальной части вашего кода, я предполагаю, что 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, что дает вам неопределенное значение.

Существует несколько различных способов исправить это.Один из способов, который я бы порекомендовал, - это деструктурирование ваш аргумент props в строке 1.

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 3

Как сказал Рэнди Кэсберн в комментариях, ваша ссылка должна быть на props.gradeSelection, а не this.props.gradeSelection.

Реквизиты принимаются как входные данные для вашей функции конструктора (т.е. constructor(props)), и поэтому на них следует ссылаться как таковые.Если вам нужно манипулировать им перед рендерингом или управлять им локально, вы можете передать это в состояние для Subject в конструкторе.