Реакция: Как мне вызвать функцию, которая содержит метод жизненного цикла, из другого компонента?

Question

У меня есть два компонента: Навбар и Модал.

Navbar содержит функцию с именем displayData(), которая содержит метод жизненного цикла с именем componentDidMount().

Итак, в Модальном Компоненте у меня есть функция, которая обновляет данные с помощью FetchApi. При сохранении данных мне нужно вызвать функцию displayData(), я пытался передать ее как подпорки, но она все еще не получает срабатывает

Что я здесь не так делаю? Любая помощь будет оценена

Код Navbar, который содержит компонентDidMount

  //Displaying the Data
  componentDidMount() {
    this.displayData();
  }
  displayData() {
    fetch("/user")
      .then(data => data.json())
      .then(data => {
        console.log(data);
        this.setState({
          userArray: data
        });
      });
  }

Модальный код, где мне нужно вызвать displayData()

 updateBtn = e => {
    fetch(`/user/${id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(newData)
    })
      .then(data => {
        return data.json();
      })
      .then(data => {
        console.log(data);
        this.props.displayData(this); // This is where i'm trying to trigger the function
      })
      .catch(err => {
        console.log(err);
      });
  };

Вызов модального с Navbar. Я передаю displayData() на дисплее в качестве реквизита

          <Modal
            data={this.state.username}
            dataone={this.state.email}
            id={this.state.id}
            close={this.closeModel}
            log={this.logChange}
            display={this.displayData}
          />

Answer 1

Определите displayData(), используя функцию стрелки, чтобы она была лексически привязана к Navbar:

  displayData = () => {
    fetch("/user")
      .then(data => data.json())
      .then(data => {
        console.log(data);
        this.setState({
          userArray: data
        });
      });
  }

А затем в вашем коде Modal вы вызываете this.props.display, так как вы пропустили реквизит через: display={this.displayData}

.then(data => {
  console.log(data);
  this.props.display();
})

Answer 2

// Компонент Navbar

constructor(props) {
  this.state = { isFetchComplete: false }
}

updateBtn = e => {
  fetch(`/user/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(newData)
  })
    .then(data => {
      return data.json();
    })
    .then(data => {
      this.setState({ isFetchComplete: true })
    })
    .catch(err => {
      console.log(err);
    });
};

{ this.state.isFetchComplete &&
  <Modal
  data={this.state.username}
  dataone={this.state.email}
  id={this.state.id}
  close={this.closeModel}
  log={this.logChange}
/>
}

// Модальный компонент

constructor (props) {
  super(props)
  this.state = {}
  this.displayData = this.displayData.bind(this)
}
//Displaying the Data
 componentDidMount() {
  this.displayData();
}
displayData() {
  fetch("/user")
    .then(data => data.json())
    .then(data => {
      console.log(data);
      this.setState({
        userArray: data
      });
    });
}

Надеюсь, это поможет !!