Question

我正在尝试编写调用webservice的组件，并通过promise异步返回一些数据。一旦这个承诺得到解决，我想将结果包含在我的组件的渲染方法中。理想情况下，我认为我希望将承诺的结果传递给另一个组件。 IE浏览器;承诺的结果是一个项目列表。

还有一件事 - 我正在使用Typescript编写这个React组件。

目前我有以下代码：

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

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

但是，此代码错误输出并显示＆＃34;无法为属性＆＃34;分配空值。

我做错了什么？在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

Promise永远不会返回它们的值，它们只会返回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})
}

React，Typescript和Promises

2 个答案: