Реагируйте: Передача реквизита в родительские возвращения - PullRequest
Новая
       9

Реагируйте: Передача реквизита в родительские возвращения

2 голосов
/ 06 февраля 2020

Сначала позвольте мне поставить свой код здесь, и я объясню, что происходит.

Родитель. js

callback = (id) => {
    this.setState({des: id});
    console.log(this.state.des);
}

//on my render i have this when i call my child component
<Child callback={this.callback}/>

Ребенок. js

handleChange = (event) => { 
    let des = event.target.value;
    console.log(des);
    this.props.callback(des);
};

Когда я console.log на моем дочернем компоненте, он возвращает данные, которые я хочу передать, но когда я делаю это в calback на моем родительском компоненте, он возвращает <empty string>, и я не знаю, почему это происходит .

Ответы [ 2 ]

2 голосов
/ 06 февраля 2020

Вызов setState является асинхронным, и поэтому вы можете не прочитать обновленное состояние, если обращаетесь к нему сразу после вызова setState. Из-за этого setState(updater[, callback]) фактически предоставляет обратный вызов, который может использоваться для операций, которые зависят от выполняемого обновления состояния. (Это объясняется в реагирующих документах для setState .)

В вашем случае настройка функции обратного вызова, подобная этой, 

callback = (id) => {
    this.setState({des: id}, () => {
        console.log(this.state.des);
    });
}

должна помочь.

Если вы хотите узнать больше о причинах, по которым setState является асинхронным (даже если вначале это может показаться немного запутанным, как в вашем случае), вы должны проверить эту проблему с github и особенно этот комментарий .

2 голосов
/ 06 февраля 2020

Причина, по которой это происходит, в том, что setState является асинхронной c функцией. Когда вы пытаетесь зарегистрировать this.state.des, состояние еще не было установлено. Если вы хотите, чтобы консоль регистрировала ваше состояние, чтобы увидеть, было ли оно установлено ожидаемым образом, вам нужно сделать это в обратном вызове this.setState (чтобы он регистрировался, как только мы узнаем, что состояние установлено). Попробуйте что-то вроде следующего в вашем родителе. js: 

callback = (id) => {
   this.setState({des: id}, () => {
       console.log(this.state.des); 
   });
}

см. React Docs для setState для более подробной информации

...