Question

我有一个应该在不同视图中使用的React组件。这个组件是Select元素，有很长的选项列表，我通过ajax调用从db加载这个列表。对于使用相同Select的所有视图，使用相同的选项列表。我的问题是我不明白如何强制选择此选项仅加载此列表一次，并将其重新用于其他渲染。现在看起来有点像这样（简单地说，很明显）：

var SelectField = React.createClass({
        loadListFromServer: function () {...}
        getInitialState()
        {
            return {
                options: [],
            };
        },

        componentDidMount() {
            this.setState({
                options: this.loadListFromServer()
            });
        },

        render: function () {
          return (
          <div>
             <Select options={this.state.options} />
          </div>
            );
        }
    })
    ;

var Index = React.createClass({
    render: function () {
        return (
                    <SelectField />
        );
    }
});

var Content = React.createClass({
    render: function () {
        return (
                    <SelectField />
        );
    }
});

    ReactDOM.render(
        <Router history={createBrowserHistory()}>
            <Route path="/" component={Index}/>
            <Route path="path" component={Content}/>
        </Router>,
        document.getElementById("container")
    )

我尝试做的事情：同时将options和loadListFromServer()设为全局，并从loadListFromServer()致电window.init。然后Index呈现为空options，因为当所有内容都已装入时，它将被填充。那么实现它的一般方法是什么？谢谢，如果我的问题很愚蠢，我很抱歉 - 我刚刚开始讨论这个话题。

Answer 1

当您说您只想加载<Select>组件一次时，我认为您的意思是您只想加载其数据一次。

您可以尝试将组件与操作分开的 flux 体系结构。

示例中问题的根源似乎是<Select>组件与其所呈现的状态（选项列表）之间的紧密耦合。每次使用组件时，它都必须创建其状态或从<Select>的不同实例重用状态。但在后一种情况下，我们需要在某个地方将状态存储在组件的不同实例之间。

你有没有看过redux？它将状态与组件分离。

存储提取的数据以避免在每次重新加载组件时获取它

1 个答案: