javascript - react.js 引入json 报错 404？为什么，test.json在同一目录结构下

问题描述

问 题

test.json和comment.js位于同一目录下
/comment.js/

//import React, {Component} from 'react';
import React, { Component, PropTypes } from 'react';
import $ from 'jquery';
import jQuery from 'jquery';
//import CommentList from './commentList';


var url='test.json'
class Common extends Component {

    constructor(props){
        super(props)
        this.state={
     comments: [
{
    author:'lm',
    message:'hi，SS'
},
{
    author:'lmqq',
    message:'hi，SS222'
}

    ]

        }
    }
//not a function   排查this
loadData(){
    //$("#test").html("1233");
    console.log(url);
   $.ajax({
           url:url,
           dataType:"json",
           success:function(comments){
               console.log(111);
           },
           error: function(data) {
        alert('error');
    }
   })
}
componentDidMount(){
    console.log('render');
    this.loadData();
}

    render() {
        return (
        <div>
        <h1 id='test'>common</h1>
        <CommentList comments={this.state.comments} url='test.json' />
        </div>    
        );
    }
}


class CommentList extends Component {
    render() {
        var commentsNode=this.props.comments;
        var messageList=commentsNode.map(function(item,index){
            return(
                <li key={index}>{item.author}:{item.message}</li>
                )
        })
        return (
            <div>
                <ul>{messageList}</ul>
            </div>
        );
    }
}


export default Common;

解决方案

这个路径要相对生成的html(或者引用生成的js的html)才行, 相对打包前的js文件有啥用, 打包后, 压根就没这个文件

把json文件放到项目根目录, 然后用/xxx.json这样的绝对路径

这篇关于javascript - react.js 引入json 报错 404？为什么，test.json在同一目录结构下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！