Дождитесь обновления родительского состояния, прежде чем вызывать другую функцию - PullRequest
Новая
       18

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

0 голосов
/ 13 февраля 2019

Я вызываю функцию, которая должна сделать 2 вещи:

  1. Вызвать функцию родительского уровня, чтобы обновить мою базу данных с помощью запроса на выборку, а затем обновить состояние моего родительского уровня
  2. Подождите, пока первая функция обновит мое состояние, а затем направьте в представление, где видны мои обновленные данные (с использованием реквизита)

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

Функция родительского уровня, которую я хотел бы запустить и обновить свое состояние. 

updateEntry = (newHeader, newBody, index) => {
    fetch("http://localhost:3000/update", {
    method: 'PUT',
    body: JSON.stringify({
        header: newHeader,
        body: newBody,
        index: index
    }),
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
})
  .then(response => response.json())
  .then(data => { this.setState({journalDb: data })})
}

Функция дочернего уровня, где я вызываю функцию родительского уровня, используя updateEntry () 

initiateUpdate = (e) => {
    e.preventDefault();
    this.props.updateEntry(value1, value2, value3)
    this.props.setEditMode();
}

Проблема в том, что состояние моего родительского уровня не обновляется вовремя, чтобы показать, когда я изменяю маршрут, используя setEditMode () ... Я не уверен, какдождаться обновления родительского состояния перед запуском

Ответы [ 2 ]

0 голосов
/ 13 февраля 2019

Просто измените вашу функцию updateEntry, чтобы она возвращала результат выборки, так как это обещание.Например: 

updateEntry = (newHeader, newBody, index) => fetch("http://localhost:3000/update", {

Затем, когда вы вызываете родительскую функцию, относитесь к ней как к обещанию: 

this.props.updateEntry(value1, value2, value3).then(() => {
  this.props.setEditMode()
})
0 голосов
/ 13 февраля 2019

так что вы могли бы сделать что-то вроде этого 

updateEntry = (newHeader, newBody, index) => {
    return new Promise((resolve) =>fetch("http://localhost:3000/update", {
        method: 'PUT',
        body: JSON.stringify({
            header: newHeader,
            body: newBody,
            index: index
        }),
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => { 
        this.setState({journalDb: data })
        resolve()
    })
})

и просто добавить 

initiateUpdate = (e) => {
    e.preventDefault();
    this.props.updateEntry(value1, value2, value3)
         .then(() => this.props.setEditMode());
}

таким образом, вы гарантированно завершили updateEntry, когда setEditMode вызван

...