React、Typescript、Promises

Question

webserviceを呼び出し、いくつかのデータを約束して非同期で返すコンポーネントを記述しようとしています。この約束が解決されたら、その結果をコンポーネントのrenderメソッドに含めることにします。理想的には、私は、約束の結果が別のコンポーネントに渡されることを望むと思います。 IE;約束の結果は、項目のリストです。

もう1つ - 私はTypescriptを使ってこのReactコンポーネントを書いています。

現在、私は次のコードを持っている：

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

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

しかし、このコードのエラーアウトして表示が「プロパティにnull値を割り当てることはできません」。

私は間違っていますか？約束事を処理し、それを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}) 
}