Javascript 与axios和x201C反应；无法读取属性'；地图'；未定义的`”；

我在使用React时出错了，从本地文件localhost读取json时出错。我检查了其他问题，但没有得到任何结果。我已经从chrome应用商店安装了react-dev工具，并检查了错误，所以我没有收到跨源错误

代码如下：

class Content extends React.Component {
    constructor(){
        super();
        this.state={
            json: {
                categories: []          
            }
        };
    }
    componentWillMount(){

        var _this = this;
        var loc = window.location.pathname;
        var dir = loc.substring(0, loc.lastIndexOf('/'));

        this.serverRequest = 
            axios
            .get(dir+"/data.json")
            .then(function(result) {    
            // we got it!
                _this.setState({
                    json:result 
                });
            });
    }
    render() {
        var title =  <a>{this.state.json.title}</a>;
        return (
            <div>
                <h2>Content</h2>
                <h3>{title}</h3>

                {this.state.json.categories.map(function(item) {
                    return (
                        <div key={item.categoryID} className="category">
                            <div> {item.categoryName} </div>  
                            <div> {item.categoryDescridivtion} </div> 
                            <div> {item.videosCount} </div> 
                        </div>
                    );
                })}
            </div>
        );
    }
}

以下是调试控制台关于axios调试控制台结果的输出：

---

您在控制台上的屏幕截图清楚地说明了它不工作的原因：

结果

没有

类别

属性。它是

结果。数据

具有

类别

，axios将结果封装在一个信封中，给您提供有关请求的信息（

配置

，

标题

，

状态

，等等），并以

数据

的形式提供实际数据。因此：

this.serverRequest = 
    axios
    .get(dir+"/data.json")
    .then(function(result) {    
    // we got it!
        _this.setState({
            json:result.data   // ***
        });
    });

例如：

类内容扩展了React.Component{
构造函数（）{
超级（）；
这个州={
json:{
类别：[]
}
};
}
组件willmount（）{
var_this=这个；
var loc=window.location.pathname；
var dir=loc.substring（0，loc.lastIndexOf（'/'）；
this.serverRequest=
axios
.get（dir+“/data.json”）
.then（函数（结果）{
//我们成功了！
console.log（result）；//这样您就可以对照图像检查它了
_这是我的国家({
json:result.data
});
});
}
render（）{
var title={this.state.json.title}；
返回(
所容纳之物
{title}
{this.state.json.categories.map（函数（项））{
返回(
{item.categoryName}
{item.categorydescription}
{item.videoscont}
);
})}
);
}
}
常数数据={
“配置”：{
“一些”：“东西”
},
数据：{
“类别”：[{
“分类”：“294”，
“parentID”：“304”，
“主观性”：“7”，
“categoryName”：“应用程序和配菜（Laura）”，
“分类描述”：“与劳拉一起在厨房学习制作令人惊叹的开胃菜和配菜。”，
“视频搜索”：“101”，
“forumCategoryID”：“163”
}, {
“类别ID”：“285”，
“parentID”：“304”，
“主观性”：“7”，
“类别名称”：“配菜”，
“类别说明”：“沙拉、蔬菜、酱汁配Hilah烹饪的配菜食谱”，
“视频搜索”：“38”，
“forumCategoryID”：“163”
}, {
“类别ID”：“337”，
“parentID”：“304”，
“主观性”：“7”，
“类别名称”：“配菜（bt）”，
“分类说明”：“拜伦·塔尔博特配菜食谱”，
“视频搜索”：“5”，
“forumCategoryID”：“163”
}, {
“类别ID”：“301”，
“parentID”：“304”，
“主观性”：“7”，
“类别名称”：“烧烤配菜”，
“分类说明”：“烧烤场男孩在烤架上制作的烧烤配菜食谱！”，
“视频搜索”：“43”，
“forumCategoryID”：“163”
}, {
“分类”：“297”，
“parentID”：“304”，
“主观性”：“7”，
“类别名称”：“汤和沙拉（劳拉）”，
“categoryDescription”：“正在寻找开始用餐的完美食谱？或者您正在寻找较清淡的食物？这些一定会让您满意！”，
“视频搜索”：“70”，
“forumCategoryID”：“163”
}],
“标题”：“标题页”
},
“标题”：{
“一些”：“东西”
}
};
常数axios={
得到（）{
返回新承诺（解决=>{
设置超时（解析，100，数据）；
});
}
};
ReactDOM.render(
,
document.getElementById（“react”）
);

当您提问时，文本区右侧有一个大橙色的“如何设置格式”框，其中包含有用的信息。还有一个完整的格式化工具条。还有一个[？]按钮提供格式化帮助。还有一个预览区，位于文本区和“发布你的问题”按钮之间（这样你就必须滚动过去才能找到按钮，以鼓励你查看），显示你的帖子发布时的样子。把你的帖子说清楚，并证明你花了时间这样做，可以提高你得到好答案的机会。我在这个场合为你解决了这个问题。
this.serverRequest = 
    axios
    .get(dir+"/data.json")
    .then(function(result) {    
    // we got it!
        _this.setState({
            json:result.data   // ***
        });
    });