本地JSON文件未在React中解析

Question

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

import React from 'react';
import './Box.css';

class Box extends React.Component {
	constructor() {
		super()
		this.state = {movieName: []}
	}
	componentDidMount() {
		fetch('./MovieDatabaseShort.json')
		.then(a => a.json())
		.then(movieName => this.setState({movieName}));
	}
	renderMovies() {
		const { movieName } = this.state;
		return movieName.map(a => {
			<h1 key={ a.id } className='heading'>{a.title}</h1>;
		});
	}
	render() {
		return <div className="box">{this.renderMovies()}</div>;
	}
}
export default Box;

我只是想把所有的电影题名。

import React from 'react';
import './Box.css';

class Box extends React.Component {
	constructor() {
		super()
		this.state = {movieName: []}
	}
	componentDidMount() {
		fetch('https://support.oneskyapp.com/hc/en-us/article_attachments/202761627/example_1.json')
		.then(a => a.json())
		.then(movieName => this.setState({movieName: movieName.color}));
	}
	render() {
		console.log( this.state );
		return <div className="box">{this.state.movieName}</div>;
	}
}
export default Box;

编辑 - 在第二个代码中，我只是从网上复制随机json文件，它工作正常。我认为这是由于我拥有的json文件的大小。它是250k +线。 更新 - 这是有效的。我认为问题是由于fetch()

import React from 'react';
import './Box.css';
import a from './MovieDatabaseShort.json'
class Box extends React.Component {
    constructor() {
        super()
        this.state = {movieName: []}
    }
    componentDidMount() {
        this.setState({movieName: a});
    }
    renderBox() {
        const { movieName } = this.state;
        return movieName.map(k => {
            return <h1 className='heading'>{k.title}</h1>;
        })
    }
    render() {
        return (
            <div className='box'>{this.renderBox()}</div>
        );
    }
}
export default Box;`

Answer 1

首先，您应该在代码中更改一些地方。

• 您应该在所有电影的状态中保留一个数组属性：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>;
  }
}

如果你仍然没有看到任何东西，那么fetch就会出现问题。然后，试试这个：

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>;
  }
}

再次，如果没有显示任何内容，请与我们分享您的JSON文件，并检查您的控制台是否有任何错误。

Answer 2

您想要做的是将所有电影保存到您所在州的阵列中。这看起来更像是这样的：

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>
    );
}