Функция setState не работает на дочернем компоненте - PullRequest
Новая
       21

Функция setState не работает на дочернем компоненте

0 голосов
/ 25 марта 2019

В моем компоненте 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.log(this.setState). В результате функция setState существует .

Итак, если функция setState правильно связана с output, почему она не работает? И почему работает только при вызове вывода из текущего компонента? `

1 Ответ

0 голосов
/ 25 марта 2019

Ваш код выглядит довольно хорошо для меняЯ думаю, вы просто запутались в том, что делает setState.setState - это встроенная функция React, поэтому при запуске console.log(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.log(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.log parent state</button>
        );
      }
    }
...