在 reactjs 组件中预加载数据

Question

我正在以 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

目前我使用 initial-ajax-like approach 来获取这些数据（警告：es6 react 语法）：

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

是否正确？ 我发现在这种情况下 render 函数 被调用了两次 。 还有其他方法吗？渲染加载图标？在检索数据之前避免渲染？

Answer 1

应该移动

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

getInitialState LifeCycle 的一部分。

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

在 reactjs 组件中预加载数据

Preload data in reactjs component

javascript

flux

reactjs

reactjs-flux