Функция setState не работает с дочерним компонентом
У меня есть следующий код в моем компоненте React:
class TheComponent extends Component{
constructor(props) {
super(props);
this.state = {
a: '',
b: ''
};
}
output = (data) => {
this.setState({
a: data.a,
b: data.b
});
}
render(){
return(<ChildrenComponent outputValues = {this.output.bind(this)}/>);
}
}
Когда я вызываю метод output из того же компонента, он работает отлично, и состояние успешно изменяется. Но когда я вызываю его из своего ChildrenComponent, он не работает, и состояние никогда не меняется.
Поэтому я добавил следующий код в функцию output, чтобы узнать, что происходит: console.info(this.setState). И в результате функция "setState" здесь.
Итак, если функция setState правильно связана с output, почему она не работает? И почему это делает работает только тогда, когда вызывается вывод из текущего компонента?`
На самом деле я не могу воспроизвести это поведение, переход к моему дочернему компоненту работает нормально: repl.it/repls/TealLivelyScale
да @y2bd, это очень странно. Это должно работать, но не уверен, что происходит.
Ты прав @Colin, но даже когда я удаляю привязку, это тоже не работает
@Captain, не могли бы вы опубликовать свой полный код, пожалуйста?
Полный код содержит более 100 строк кода :[ он слишком большой
@ Капитан, почему ты думаешь, что это не работает? Я не вижу, чтобы вы использовали свое состояние где-либо в своем коде, что заставляет меня думать, что нам нужно увидеть БОЛЬШЕ вашего кода, чтобы помочь вам.
Я предполагаю, что render() = > { это опечатка, когда вы печатали код примера? Это должно быть render = () => {
@larz, там я отредактировал код и добавил сведения о состоянии.
Извините, @EvilGeniusJamie, я опечатался. Теперь я исправил это в примере кода. Я не понимаю, почему setState не работает
@Captain видеть, как вы устанавливаете начальное состояние в конструкторе, не... конструктивно;) . ПОЧЕМУ вы думаете, что при звонке output состояние не обновляется? Вы не используете this.state.a в своем render методе, поэтому мне трудно помочь вам устранить неполадки. Может быть, добавить console.info(this.state.a) внутри вашего метода render и посмотреть, отображает ли он то, что вы ожидаете при повторном рендеринге? Возможно console.info(data) и убедитесь, что внутри вашего output метода есть `data.a`. Мы видим только половину кода.
@larz, да, но я сделал console.info, а также у меня есть расширение реакции для chrome, и я проверил состояние с ними обоими, и оно не меняется. Я исправляю это с помощью Redux, но я оставлю этот вопрос открытым на случай, если у кого-то еще возникнет такая же проблема, и я могу найти ответ здесь.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ваш код выглядит довольно хорошо для меня. Я думаю, вы просто немного запутались в том, что делает setState. setState — это встроенная функция React, поэтому запуск console.info(this.setState) всегда будет регистрировать функцию, в частности эту функцию.
Я не уверен, как вы вызываете свою опору в дочернем компоненте, но приведенный ниже пример позволяет дочернему компоненту установить родительское состояние для объекта data над render функциями return, а также зарегистрировать родительское состояние в консоли.
class TheComponent extends Component{
constructor(props) {
super(props);
this.state = {
a: '',
b: ''
};
}
setValues = (data) => {
this.setState({
a: data.a,
b: data.b
});
}
outputValues = () => {
console.info(this.state);
}
render(){
return (
<ChildrenComponent set = {this.setValues} output = {this.outputValues}/>
<p>{this.state.a}</p>
);
}
}
class ChildrenComponent extends Component{
render() {
const data = { a: 'foo', b: 'bar' };
return (
<button onClick = {() => this.props.set(data)}>change parent state</button>
<button onClick = {this.props.outputValues}>console.info parent state</button>
);
}
}
Вам не нужно связываться таким образом, если вы используете функцию стрелки.