带有axios的reactjs“无法读取未定义的属性'map'”

Question

我在使用React时一团糟，当从a读取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>
        );
    }
}

这是JSON：

{
    "categories": [{
        "categoryID": "294",
        "parentID": "304",
        "subjectID": "7",
        "categoryName": "Apps and Side Dishes (Laura)",
        "categoryDescription": "Learn to make amazing appetizers and side dishes with Laura in the Kitchen.",
        "videosCount": "101",
        "forumCategoryID": "163"
    }, {
        "categoryID": "285",
        "parentID": "304",
        "subjectID": "7",
        "categoryName": "Side Dishes",
        "categoryDescription": "Side dish recipes for salads, vegetables, sauces with Hilah cooking.",
        "videosCount": "38",
        "forumCategoryID": "163"
    }, {
        "categoryID": "337",
        "parentID": "304",
        "subjectID": "7",
        "categoryName": "Side Dishes (bt)",
        "categoryDescription": "Side dish recipes with Byron Talbott.",
        "videosCount": "5",
        "forumCategoryID": "163"
    }, {
        "categoryID": "301",
        "parentID": "304",
        "subjectID": "7",
        "categoryName": "Side Dishes for Barbecue",
        "categoryDescription": "Barbecue side dish recipes done on the grill by the BBQ Pit Boys!",
        "videosCount": "43",
        "forumCategoryID": "163"
    }, {
        "categoryID": "297",
        "parentID": "304",
        "subjectID": "7",
        "categoryName": "Soups and Salads (Laura)",
        "categoryDescription": "Looking for the perfect recipe to start your meal? Or are you looking to eat something on the lighter side? These are sure to have you covered!",
        "videosCount": "70",
        "forumCategoryID": "163"
    }],

    "title": "Title page"
}

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

Answer 1

您从控制台截取的屏幕截图清楚地说明了为什么它不起作用： result没有categories属性。 它是具有categories的result.data ，axios将结果包装在各种信封中，为您提供有关请求的信息（ config ， headers ， status等），并将实际数据作为data 。 所以：

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

例：

 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! console.log(result); // So you can check it against your image _this.setState({ json:result.data }); }); } 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> ); } } const data = { "config": { "some": "stuff" }, data: { "categories": [{ "categoryID": "294", "parentID": "304", "subjectID": "7", "categoryName": "Apps and Side Dishes (Laura)", "categoryDescription": "Learn to make amazing appetizers and side dishes with Laura in the Kitchen.", "videosCount": "101", "forumCategoryID": "163" }, { "categoryID": "285", "parentID": "304", "subjectID": "7", "categoryName": "Side Dishes", "categoryDescription": "Side dish recipes for salads, vegetables, sauces with Hilah cooking.", "videosCount": "38", "forumCategoryID": "163" }, { "categoryID": "337", "parentID": "304", "subjectID": "7", "categoryName": "Side Dishes (bt)", "categoryDescription": "Side dish recipes with Byron Talbott.", "videosCount": "5", "forumCategoryID": "163" }, { "categoryID": "301", "parentID": "304", "subjectID": "7", "categoryName": "Side Dishes for Barbecue", "categoryDescription": "Barbecue side dish recipes done on the grill by the BBQ Pit Boys!", "videosCount": "43", "forumCategoryID": "163" }, { "categoryID": "297", "parentID": "304", "subjectID": "7", "categoryName": "Soups and Salads (Laura)", "categoryDescription": "Looking for the perfect recipe to start your meal? Or are you looking to eat something on the lighter side? These are sure to have you covered!", "videosCount": "70", "forumCategoryID": "163" }], "title": "Title page" }, "headers": { "some": "stuff" } }; const axios = { get() { return new Promise(resolve => { setTimeout(resolve, 100, data); }); } }; ReactDOM.render( <Content />, document.getElementById("react") ); 

 <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>