Блог

Я видел тысячи сообщений об этом, поэтому я немного сбит с толку, я использовал функцию со стрелкой, я привязал свой метод, измененный для componentDidUpdate, но я все еще не могу

в моем асинхронном вызове setState мои данные и передают их моему дочернему компоненту.

Родительский компонент

 class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeNav: 1,
      loading: true,
      data: []
    };
    this.fetchData = this.fetchData.bind(this);
  }

  fetchData = () => {
    var that = this;
    getMyData()
      .then(res => {
        console.log(res); // Output res Object
        that.setState({
          data: res
        })
      })
      .catch((error) => {
        console.log(error);
      });
  }

  componentDidUpdate = () => this.fetchData()

  render() {
    const { data, loading } = this.state;
 return (
      <>

            <ChildComponent data={this.data} loading={loading}/>
      </>
    );
  }
}

 

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

 class CurrentUp extends React.Component {
    constructor(props) {
        super(props);
    }
    componentDidUpdate = () => {
        console.log(this.props.data);   // Output []
        console.log(this.props.loading); // Output true
    }
}
render() {
        console.log(this.props.data);   // Output []
        console.log(this.props.loading); // Output true
        return (
             <div>
             </div>
        );
    }
}
 

Что я упускаю из виду ?

Решаемая, я не уверен, как. Я продолжал пробовать разные вещи

Вы регистрируете данные в componentDidMount методе с помощью консоли. Этот метод выполняется только один раз, когда компонент смонтирован. Когда вы обновляете данные в родительском компоненте и передаете их дочернему компоненту, он не создает заново весь экземпляр компонента. Передаются только обновления. Вы можете получить доступ к этим обновлениям в componentDidUpdate методе. Или, если вы напрямую обращаетесь к реквизитам, вы можете записать данные внутри render метода.

 class CurrentUp extends React.Component {
    constructor(props) {
        super(props);
    }

    render = () => {
        console.log(this.props.data);  
        console.log(this.props.loading);

        return null;
    }
}
 

Другие моменты:

• Вам не нужно связывать функцию с this , если вы используете функцию со стрелкой.
• Внутри функции arrow безопасно использовать this ключевое слово. Нет необходимости назначать его that .

Попробуйте добавить еще немного кода, потому что я вижу, что дочерний компонент, который вы опубликовали, является текущим компонентом. Отправьте реальный дочерний компонент, а затем переместите переменную в вашей функции fetchData в конструктор.