本地 JSON 文件未在 React 中解析

Question

我有一个包含大约 5000 个条目的大型 JSON 文件，当我使用 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>
    );
}

Answer 3

使用钩子的另一种方法如下。 就我而言，我需要从 json 文件中获取配置数据

import _data from '../../json/config.json';
export const Mapa = () => {
  
    const [config, setConfig] = useState(null);
    useEffect(()=>{                 
          setConfig(_data );
          
    },[]);
}