Блог

Я пытаюсь передать состояние от родительского компонента к дочернему компоненту и внутри тега ссылки, которые меняют маршрут, но в дочернем компоненте я получаю и неопределенное значение. Есть ли способ отправить параметр, а также изменить маршрут одновременно?

 
class Teacher extends Component {

   constructor(props) {
    super(props)

    this.state = {
      showComponent: false,
      allStudents: ["a","b", "c", "d"],
    }
  }
  onButtonClick() {
    this.setState({showComponent: true});}

render() {
    console.log(this.state.allStudents " student list")
    return (

     <Link to={"/student"}>
            <Button onClick={()=> {this.onButtonClick()}}>Button</Button>
           

        {this.state.showComponent amp;amp;
           <CreateExam test={this.state.allStudents} /> 
        } 
     </Link>

 </div>
)}

  

Дочерний компонент

 class CreateExam extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    console.log(this.props.allStudents   " student list") 

    return (
      <div className="teacher">
      </div>

    );
  }

  

Внутри вашей функции onButtonClick вы заменяете свое состояние на {showComponent: true} . Поэтому allStudents теряется.

Вместо этого функция должна быть:

 onButtonClick() {
    this.setState(prevState => ({...prevState, showComponent: true}));
}
  

Также используйте то же имя реквизита, что и то, что вы отправляете от родительского компонента.

 <CreateExam test={this.state.allStudents} /> 

console.log(this.props.test   " student list") 
  

Обратитесь: https://jsfiddle.net/t9j7hmdb /