Question

我有一个React组件来表示一个名为<Tasks>的任务列表，如下所示：

var Tasks = React.createClass({
    getInitialState: function () {
        return {
            tasks: []
        };
    },
    componentDidMount: function () {
        this.setState({
            tasks: this.props.tasks
        });
    },
    render: function () {
        var tasks = this.state.tasks.map(function (task) {
            return (
                <Task key={task.id} description={task.description} completed={task.completed} />
            );
        });
        return (
            <table className="table table-tasks">
                <tbody>
                    {tasks}
                </tbody>
            </table>
        );
    }
});

但this.state.tasks尚未设定。使用Chrome的React检查器，我可以看到this.props.tasks是一个包含两个对象的数组（预期），但this.state.tasks是一个空数组。因此，setState方法中的componentDidMount调用似乎并未实际设置状态。

我做错了什么？

Answer 1

原来我可以访问props中的getInitialState()。不知道我在componentDidUpdate()中选择设置状态的惯例，所以现在我只是在做：

var Tasks = React.createClass({
    getInitialState: function () {
        this.setState({
            tasks: this.props.tasks
        });
    },
    render: function () {
        var tasks = this.state.tasks.map(function (task) {
            return (
                <Task key={task.id} description={task.description} completed={task.completed} />
            );
        });
        return (
            <table className="table table-tasks">
                <tbody>
                    {tasks}
                </tbody>
            </table>
        );
    }
});

感谢Jack Franklin的tip！

React组件未设置状态

1 个答案: