javascript - componentInstance.setState 在 0.11.0 中未定义

Question

我在名为 DashboardPosition.js 的文件中有以下组件:

var DashboardPosition = React.createClass({
    getInitialState: function() {
        return {
            items: []
        };
    },
    render: function() {
        return (
            <div className="well well-sm dashboard-item">
                This component has {this.state.items.length} items
            </div>
        );
    }
});

然后我在我的页面中毫无问题地呈现它，如下所示:

var dashboardPosition = <DashboardPosition />;
React.renderComponent(dashboardPosition, document.querySelector("#position"));

但是当我尝试以下操作时:

var dashboardPosition = <DashboardPosition />;

React.renderComponent(dashboardPosition, document.querySelector("#position"));

dashboardPosition.setState({
    items: [{name: "AMD"}, {name: "LIQ"}, {name: "ELEC"}]
});

我收到以下错误:

Uncaught TypeError: undefined is not a function
    dashboardPosition.setState

这似乎只发生在 v0.11.0 中。我已经在 v0.10.0 中试过了，它工作正常。可能是错误还是我错过了什么？

Answer 1

这是一项从 0.10.0 开始的更改，在开发版本中向您发出警告，而在 0.11.0 中现在是一项“重大更改”。

当您创建一个组件的实例时，返回的是一个描述符，这正是 React 渲染该组件所需的任何内容。在 0.10.0 之前，这恰好是实际的虚拟 dom 节点，这会导致大量反模式并消除 react 能够优化某些事物的潜力。您不能再对返回值执行任何操作，除了:

• 从渲染函数中返回它们
• 使用cloneWithProps添加以制作更新的副本

如果您需要在 DashboardPosition 组件上设置状态，则需要在 DashboardPosition 中进行。

如果在 DashboardPosition 中执行没有意义，您应该传递 items作为 Prop ，例如<DashboardPosition items={items} /> ，并使用 this.props.items而不是 this.state.items .