Question

我正在玩ReactJs，我有这个简单的代码

var User = React.createClass({
    render: function () {
        return(
            <li>
                {this.props.email}
            </li>
        );
     }
});

var UserList = React.createClass({
    reload: function () {
        var xhr = new XMLHttpRequest();
        xhr.open('get', "http://localhost:64501/Home/GetUsers", true);
        xhr.onload = function () {
            var result = JSON.parse(xhr.responseText);
            this.setState({ data: result });
            console.log(JSON.stringify(result));
        }.bind(this);

        xhr.send();
    },

    getInitialState: function () {
        return {
            data: [
                { email: "bob@gmail.com", id: "1" },
                { email: "boby@gmail.com", id: "2" }
            ]
        };
    },

    componentDidMount: function () {
        window.setInterval(this.reload, 3000);  
    },

    render: function () {       
        if (this.props.data != null) {
            var userNodes = this.props.data.map(function (user) {               
                return (
                    <User email={user.email} key={user.id } ></User>
                );
            });

            return (
                <div>
                    <ul>{userNodes}</ul>                    
                 </div>
            );
        }
        else {
            console.log("this.props.data is null");
            return null;
        }        
    }
});

ReactDOM.render(<UserList />, document.getElementById('root'));

我有两个问题：
1 - 由getInitialState函数返回的数据不由组件呈现 2 - setState不刷新重载函数中的组件。

Answer 1

您正在阅读this.props.data，您应该阅读this.state.data。

请注意外部组件属性与组件内部状态之间的区别。

只需将所有this.props.data替换为this.state.data，您的代码就可以正常运行。

ReactJs - getInitialState不起作用

1 个答案: