React, Typcript и Promises

Question

Я пытаюсь написать компонент, который вызывает веб-сервис и возвращает некоторые данные асинхронно через обещание. как только это обещание будет разрешено, я хотел бы включить результаты в метод рендеринга моего компонента. В идеале я думаю, что мне хотелось бы, чтобы результаты обещания были переданы другому компоненту. IE; результатом обещания является список предметов.

Еще одна вещь - я пишу этот компонент React с помощью TypScript.

В настоящее время у меня есть следующий код:

componentWillMount() { 
    let fooProps = listGetter.returnListData().then((response) => { 
     return response; 
    }); 
} 

public render(): JSX.Element { 
    <div> 
     <Foo ElementProperties={this.fooProps} /> 
    </div> 
} 

Однако этот код ошибка вне и показывает «не могут присвоить нулевое значение свойства».

Что я делаю неправильно? Каков наилучший способ справиться с обещаниями и разрешить их в компонентах REACT?

Спасибо!

Answer 1

Вы должны использовать the state данного компонента.
Изменение состояния приводит к повторному рендерингу компонента, подобно тому, как при изменении компонента свойства дочернего объекта происходит повторное отображение ребёнка.

Что-то вроде:

componentWillMount() { 
    listGetter.returnListData().then((response) => { 
     this.setState({ 
      fooProps: response.fooProps 
     }); 
    }); 
} 

public render(): JSX.Element { 
    <div> 
     <Foo ElementProperties={ this.state.fooProps } /> 
    </div> 
} 

Answer 2

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

componentWillMount() { 
    // bind the function to `this` so even if you don't use an 
    // anonymous arrow function this call will work in the right context 
    let updateComponent = this.updateComponent.bind(this); 
    listGetter.returnListData().then((res) => { 
     updateComponent(res); 
    }) 
} 

updateComponent(res) { 
    this.setState({fooProps: res.fooProps}) 
}