Question

是的，我知道这是一个很受欢迎的问题，网上有很多文章。但在我的情况下，我只是放弃谷歌搜索。

我得到了服务器端的常见（服务器和客户端）组件的渲染，这些组件应该使用某种数据提供程序（让我们暂时忘记redux）。这里有一个问题...... 我将使用typescript语法。

那么，让我们看一个简化的组件示例：

// This povider is supposed to be injected in component's props as a dependency
// Imagine this to load the 'name' value from DB
export interface IProvider {
    getName(id: number): Promise<string>
}

export class ShowName extends React.Component<{id: number, provider: IProvider}, {name: string}> {
    async componentWillMount(): Promise<void> {
        const provider = this.props.provider;

        this.setState({name: await provider.getName(this.props.id)});
    }

    render() {
        return <h1>{this.state.name}</h1>;
    }
}

这似乎是解决这个问题的常用方法。它被编译并运行没有错误，但有一个问题我无法解决。当组件在服务器端呈现时，我没有暴露“名称”值，但是如果我记录了所有操作，则在异步接收数据后进行组件呈现。但价值没有呈现...... 我还在后端控制台上收到警告：

警告：setState（...）：只能更新安装组件。这通常意味着您在服务器上的componentWillMount（）之外调用了setState（）。这是一个无操作。请检查ShowName组件的代码。

那么，我该怎么办呢？

UPD 我想，componentWillMount实际上不能异步工作。我刚刚对其进行了一些记录，发现render()之后componentWillMount()准确执行了setState()。并且在渲染后解析Promise（带iterrows）。这很糟糕。

再一次：如何在渲染之前异步获取React组件中的数据？

0 个答案: