React 教程：未捕获的 TypeError：无法读取 null 的属性“数据”答案

【问题标题】：React tutorial: Uncaught TypeError: Cannot read property 'data' of nullReact 教程：未捕获的 TypeError：无法读取 null 的属性“数据”
【发布时间】：2015-09-09 21:52:13
【问题描述】：

我正在关注 React 教程：http://facebook.github.io/react/docs/tutorial.html

我只是关注 http://facebook.github.io/react/docs/tutorial.html#fetching-from-the-server

我在 SO 上遇到了类似的问题，但没有找到适合我的具体案例的解决方案。

var data = [
    {author: "Pete Hunt", text: "This is one comment"},
    {author: "Jordan Walke", text: "This is *another* comment"},
    {author: "Bob Lilly", text: "This is *another* comment 2"}

];

var Comment = React.createClass({
    render: function() {
        var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
        return (
            <div className="comment">
                <h2 className="commentAuthor">
                    {this.props.author}
                </h2>
                <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
            </div>
        );
    }
});

var CommentList = React.createClass({
    render: function() {
        var commentNodes = this.props.data.map(function (comment) {
            return (
                <Comment author={comment.author}>
                    {comment.text}
                </Comment>
            );
        });
        return (
            <div className="commentList">
                {commentNodes}
            </div>
        );
    }
});

var CommentForm = React.createClass({
    render: function() {
        return (
            <div className="commentForm">
                <br/>Hello, world! I am a CommentForm.
            </div>
        );
    }
});

var CommentBox = React.createClass({
    render: function() {
        return (
            <div className="commentBox">
                <h1>Comments</h1>
                <CommentList data={this.props.data} /> 
                <CommentForm />
            </div>
        );
    }
});


React.render(
    // <CommentBox url="comments.json" />, 
    <CommentBox data={data} />,
    document.getElementById('content')
);

当我尝试使用从服务器获取的数据时（第一步 --> 参见第二个链接），我收到此错误：

未捕获的类型错误：无法读取 null 的属性“数据”

我猜这与错误地传递数据有关。

编辑：我用目前给出的答案编辑了鳕鱼

编辑 2：现在它适用于哑数据 (var data = [ ... )，但从服务器获取时则不适用

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您将data 作为道具发送到CommentBox 并尝试通过CommentBox 状态传递它。

<CommentList data={this.props.data} />

而不是

<CommentList data={this.state.data} />

我通常以这种方式推理道具；道具是进来的东西，状态是已经进来的东西。

【讨论】：

实际上这是一个错字（不知道为什么）。总之在 render: function() of CommentList 我试过 console.log(this.props);它打印 Object {data: undefined} 但错误仍然存在
我设法使它适用于哑数据，但不适用于服务器数据。查看我的编辑

【解决方案2】：

仅添加该行不会从服务器获取数据。您需要一直工作到“反应状态”部分的末尾，创建数据文件，并添加一些 ajax 代码来加载数据。

【讨论】：

【解决方案3】：

您通过 props 将 data 发送到 CommentBox 并在您的 CommentList 组件中检查它

【讨论】：

我不明白。你能更精确吗？（也请参阅我的编辑）
我设法使它适用于哑数据，但不适用于服务器数据。查看我的编辑