Передача данных от дочернего к родительскому, React.js

MiddleZ спросил: 13 июня 2018 в 11:04 в: javascript

Я пытаюсь передать данные из дочернего компонента до родительского компонента. Однако при этом я получаю сообщение об ошибке:

Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount

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

const Child = (props) => {
  let message = 'Hi mom'
  props.callBackFromParent(message);
  return <h3>{props.message}</h3>
};

class Parent extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      messageFromChild: '',
    }
    this.callBackFromParent = this.callBackFromParent.bind(this);
  }
  
  callBackFromParent(dataFromChild){
    this.setState({messageFromChild: dataFromChild})
  }
  
  render(){
    return (
      <div>
        <h2>Message from Child is:</h2>
       
        <Child 
          message={this.state.messageFromChild}
          callBackFromParent={this.callBackFromParent}
        />
      </div>
    )
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

1 ответ

Tholle ответил: 13 июня 2018 в 11:08

Невозможно вызвать setState во время рендеринга, который приведет к вызову props.callBackFromParent.

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

Пример

const Child = (props) => {
  let message = 'Hi mom';  return <h3 onClick={() => props.callBackFromParent(message)}>{props.message}</h3>
};

Дополнительное видео по вопросу: Передача данных от дочернего к родительскому, React.js

React - #3 - пробрасываем данные из парент компонента в чайлд с помощью props

4. React-компонент, передача данных

React JS / Redux - Урок #6 - Передача информации в компонент