Javascript 本地JSON文件未在React中进行分析

我有一个很大的JSON文件，大约有5000个条目，当我使用fetch（）解析它时，它不会显示在浏览器中。 这是我的密码：

从“React”导入React；
导入“/Box.css”；
类框扩展了React.Component{
构造函数（）{
超级（）
this.state={movieName:[]}
}
componentDidMount（）{
获取（'./MovieDatabaseShort.json'）
.then（a=>a.json（））
.then（movieName=>this.setState（{movieName}））；
}
renderMovies（）{
const{movieName}=this.state；
返回movieName.map（a=>{
{a.title}；
});
}
render（）{
返回{this.renderMovies（）}；
}
}
导出默认框看起来您要做的是将所有电影保存到您所在州的一个数组中。看起来更像这样：

constructor() {
    super()
    this.state = {movies: []}
}
componentWillMount() {
    fetch('./MovieDatabaseShort.json')
    .then(a => a.json())
    .then(b => this.setState({movies: b}));
}

然后，在渲染函数中，您将循环播放电影并显示标题：

render() {
    const { movies } = this.state;
    return (
        <div className='box'>
            {movies.map(movie => <h1 className='heading'>{movie.title}</h1>)}       
        </div>
    );
}

render（）{
const{movies}=this.state；
返回(
{movies.map（movie=>{movie.title}}
);
}
首先，代码中有一些地方需要更改


您应该在您的状态下为所有电影保留一个数组属性：
movies:[]
您应该映射这个状态值，然后呈现一些JSX
使用
componentDidMount
而不是
componentWillMount
，因为它在将来的版本中将被弃用

下面是示例代码：

class Box extends React.Component {
  constructor() {
    super();
    this.state = { movies: [] };
  }

  componentDidMount() {
    fetch("./MovieDatabaseShort.json")
      .then(res => res.json())
      .then(movies => this.setState({ movies }));
  }

  renderMovies() {
    const { movies } = this.state;
    return movies.map(movie => (
      <h1 key={movie.title} className="heading">
        {movie.title}
      </h1>
    ));
  }

  render() {
    return <div className="box">{this.renderMovies()}</div>;
  }
}

同样，如果没有显示任何内容，请与我们共享JSON文件，并检查控制台是否有任何错误。
我们可以查看JSON文件的一部分吗？控制台中有任何错误吗？您是否还检查了数据是否正在从该提取返回？我可以让它在这里使用一些随机api：@justDan控制台中没有错误，是的，我也尝试了使用一些来自web的随机json文件，但没有使用我的json文件。我将发布我的json文件的一部分（不是完整的，因为它的100k+行太大了）。这是我的json文件@devserkan检查这个json文件。在两个答案中，页面只是显示了空框（由于附带了div的css属性）。我将发布json文件的一部分。控制台在两个答案中都没有显示错误。@ManishPant，我已经看到了JSON。你能用你当前的代码更新你的问题吗？只需添加当前的一个，不要替换它。另外，可以在渲染方法中尝试使用console.log吗？如下所示：
render（）{console.log（this.state）；return{this.renderMovies（）}；
i console记录了它，它返回了一个带有空movieName数组的对象。我想这是由于我拥有的json文件的大小（250k+行）。我尝试使用来自网络的随机json文件，效果很好。你能以某种方式共享它吗？你可以尝试直接导入它。在你的文件顶部放一条导入语句：
从“/MovieDatabaseShort.json”导入电影；
然后像这样更改你的状态：
此.state={movies}；
然后，删除
componentDidMount
块并重试。我认为您不能对本地文件使用fetch（）。您需要从url提供该数据，然后获取该数据。或者您可以将该json导入到您的组件中。您可能还想在componentDidMount中执行数据获取
class Box extends React.Component {
  constructor() {
    super();
    this.state = { movies: [] };
  }

  componentDidMount() {
    import("./MovieDatabaseShort.json").then(movies =>
      this.setState({ movies })
    );
  }

  renderMovies() {
    const { movies } = this.state;
    return movies.map(movie => (
      <h1 key={movie.title} className="heading">
        {movie.title}
      </h1>
    ));
  }

  render() {
    return <div className="box">{this.renderMovies()}</div>;
  }
}