在reactjs组件中预加载数据

Preload data in reactjs component

本文关键字：加载 数据 reactjs 组件      更新时间：2023-09-26

我正在以reactjs/flux的方式创建简单的应用程序。我有MessageStore和UserStore

MessageStore包含

[
    {"id": 1, "text": "It is a test message", "userId": 155123}
]

UserStore包含

[
    {"id": 155123, "name": "Thomas Brown", "age": 35}
]

我正在创建显示消息的组件。它需要用户名，但它只有从props获得的userId。

目前，我使用类似ajax的初始方法来获取这些数据（警告：es6-react语法）：

componentDidMount() {
    var author = UserStore.getById(this.props.userId);
    this.setState({
        author: author
    })
}
render() {
    return (<a>{this.state.author.name</a>);
}

正确吗我发现在这种情况下render函数被调用了两次

有其他方法吗渲染加载图标？避免在检索数据之前进行渲染？

应该移动

var author = UserStore.getById(this.props.userId);
return({
    author: author
})

获取InitialState生命周期的部分。

getInitialState对组件的每个实例只调用一次，在这里您有机会初始化实例的自定义状态。与getDefaultProps不同，每次创建实例时都会调用此方法一次。此时，您可以访问this.ops.

相关文章：