Json 为什么我得到“this.props.data未定义”错误？_Json_Reactjs_Entity Framework_Webpack_Asp.net Core Mvc

Json 为什么我得到“this.props.data未定义”错误？

json reactjs entity-framework webpack asp.net-core-mvc

Json 为什么我得到“this.props.data未定义”错误？,json,reactjs,entity-framework,webpack,asp.net-core-mvc,Json,Reactjs,Entity Framework,Webpack,Asp.net Core Mvc,我正在观看教程：我得到错误：this.props.data未定义我在我的测试应用程序中实现了这个教程，在那里我还测试了各种React工具，所以我没有100%地复制粘贴它。我正在使用ASP.NET核心MVC和React，自己的体系结构（用于测试应用程序），我没有安装教程中的所有npm。但我相信，这是语法或架构问题。我猜，调用服务器的数据在app.js或CommentBox.js中被破坏了来自控制台的错误： TypeError: this.props.data is undefined[Wi

我正在观看教程：

我得到错误：

this.props.data未定义

我在我的测试应用程序中实现了这个教程，在那里我还测试了各种React工具，所以我没有100%地复制粘贴它。我正在使用ASP.NET核心MVC和React，自己的体系结构（用于测试应用程序），我没有安装教程中的所有npm。但我相信，这是语法或架构问题。我猜，调用服务器的数据在

app.js

或

CommentBox.js

中被破坏了

来自控制台的错误：

TypeError: this.props.data is undefined[Więcej informacji] bundle.js line 541 > eval:45:17
The above error occurred in the <CommentList> component:
    in CommentList (created by CommentBox)
    in div (created by CommentBox)
    in CommentBox (created by App)
    in div (created by App)
    in div (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
react-dom.development.js:14226
[Przełącz szczegóły wiadomości] TypeError: this.props.data is undefined[Więcej informacji]

在我的

组件

文件夹中，所有父文件和子文件：

CommentBox.js

：

(...)
return (
                <div className="App">
                    <div className="App-header">
                        Welcome to React!
                        <AddProject addProject={this.handleAddProject.bind(this)}/>
                        <Projects onDelete={this.handleDeleteProject.bind(this)} projects={this.state.projects} />
                        <CommentBox url="/comments" pollInterval={2000}/>
                    </div>
                </div>
            );
    (...)

import React, { Component } from 'react';
import $ from 'jquery';
import uuid from 'uuid';
import CommentList from '../components/CommentList';
import CommentForm from '../components/CommentForm';

class CommentBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = { data: this.props.initialData };
    }
    loadCommentsFromServer() {
        const xhr = new XMLHttpRequest();
        xhr.open('get', this.props.url, true);
        xhr.onload = () => {
            const data = JSON.parse(xhr.responseText);
            this.setState({ data: data });
        };
        xhr.send();
    }
    componentDidMount() {
        this.loadCommentsFromServer();
        window.setInterval(() => this.loadCommentsFromServer(), this.props.pollInterval);
    }
    render() {
        return (
            <div className="commentBox">
                <h1>Comments</h1>
                <CommentList data={this.state.data} />
                <CommentForm/>
            </div>
        );
    }
}
export default CommentBox;

import React, { Component } from 'react';
import $ from 'jquery';
import uuid from 'uuid';
import Comment from '../components/Comment';

class CommentList extends React.Component {
    render() {
        var commentNodes = this.props.data.map(function (comment) {
            return (
                <Comment name={comment.name} key={comment.productID}>
                </Comment>
            );
        });
        return (
            <div className="commentList">
                {commentNodes}
            </div>
        );
    }
}

export default CommentList;

import React, { Component } from 'react';
import $ from 'jquery';
import uuid from 'uuid';

class Comment extends React.Component {
    rawMarkup() {
        const md = new (global.Remarkable || window.Remarkable)();
        const rawMarkup = md.render(this.props.children.toString());
        return { __html: rawMarkup };
    }
    render() {
        return (
            <div className="comment">
                <h2 className="commentName">
                    {this.props.name}
                </h2>
                {this.props.children}
            </div>
        );
    }
}


export default Comment;

Comment.js

：

(...)
return (
                <div className="App">
                    <div className="App-header">
                        Welcome to React!
                        <AddProject addProject={this.handleAddProject.bind(this)}/>
                        <Projects onDelete={this.handleDeleteProject.bind(this)} projects={this.state.projects} />
                        <CommentBox url="/comments" pollInterval={2000}/>
                    </div>
                </div>
            );
    (...)

import React, { Component } from 'react';
import $ from 'jquery';
import uuid from 'uuid';
import CommentList from '../components/CommentList';
import CommentForm from '../components/CommentForm';

class CommentBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = { data: this.props.initialData };
    }
    loadCommentsFromServer() {
        const xhr = new XMLHttpRequest();
        xhr.open('get', this.props.url, true);
        xhr.onload = () => {
            const data = JSON.parse(xhr.responseText);
            this.setState({ data: data });
        };
        xhr.send();
    }
    componentDidMount() {
        this.loadCommentsFromServer();
        window.setInterval(() => this.loadCommentsFromServer(), this.props.pollInterval);
    }
    render() {
        return (
            <div className="commentBox">
                <h1>Comments</h1>
                <CommentList data={this.state.data} />
                <CommentForm/>
            </div>
        );
    }
}
export default CommentBox;

import React, { Component } from 'react';
import $ from 'jquery';
import uuid from 'uuid';
import Comment from '../components/Comment';

class CommentList extends React.Component {
    render() {
        var commentNodes = this.props.data.map(function (comment) {
            return (
                <Comment name={comment.name} key={comment.productID}>
                </Comment>
            );
        });
        return (
            <div className="commentList">
                {commentNodes}
            </div>
        );
    }
}

export default CommentList;

import React, { Component } from 'react';
import $ from 'jquery';
import uuid from 'uuid';

class Comment extends React.Component {
    rawMarkup() {
        const md = new (global.Remarkable || window.Remarkable)();
        const rawMarkup = md.render(this.props.children.toString());
        return { __html: rawMarkup };
    }
    render() {
        return (
            <div className="comment">
                <h2 className="commentName">
                    {this.props.name}
                </h2>
                {this.props.children}
            </div>
        );
    }
}


export default Comment;

import React，{Component}来自'React'；
从“jquery”导入美元；
从“uuid”导入uuid；
类注释扩展了React.Component{
rawMarkup（）{
const md=new（global.signific | | window.signific）（）；
const rawMarkup=md.render（this.props.children.toString（））；
返回{uuuhtml:rawMarkup}；
}
render（）{
返回(
{this.props.name}
{this.props.children}
);
}
}
导出默认注释；

首先，代码太多了。尽量简洁

您的问题是

注释框中的此.state.data
最初是未定义的/空的
。确保将initialData
prop传递到CommentBox
中，或在CommentList

var commentNodes = (this.props.data || []).map(function (comment) {
  return (
    <Comment name={comment.name} key={comment.productID}>
    </Comment>
  );
});

var commentNodes=（this.props.data | | |[]）.map（函数（注释）{
返回(
);
});
首先，代码太多了。尽量简洁
您的问题是注释框中的此.state.data
最初是未定义的/空的
。确保将initialData
prop传递到CommentBox
中，或在CommentList

var commentNodes = (this.props.data || []).map(function (comment) {
  return (
    <Comment name={comment.name} key={comment.productID}>
    </Comment>
  );
});

var commentNodes=（this.props.data | | |[]）.map（函数（注释）{
返回(
);
});
您没有将初始数据
道具传递给评论框
，因此提供给评论列表
的数据
将是未定义的
。您没有将初始数据
道具传递给评论框
，因此，提供给CommentList
的数据将是未定义的。非常喜欢这种方法：（this.props.data | |[]）。map
还有一件事需要注意！非常喜欢这种方法：（this.props.data | | |[]）。map
还有一件事需要注意！