Локальный файл json не анализируется в react

У меня есть большой файл 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-файла, который у меня есть. Это более 250 тысяч строк.
Обновлять - Это работает. Думаю, проблема в 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;`

Можем ли мы увидеть часть вашего json файла?

devserkan 13.09.2018 19:32

Есть ошибки в вашей консоли? Также вы проверяли, что данные возвращаются из этой выборки? Я могу заставить его работать здесь со случайным api: jsfiddle.net/5vjqabv3/6446

justDan 13.09.2018 20:40

@justDan нет ошибок в консоли, и да, я также пробовал с каким-то случайным файлом json из Интернета, и он работал не с моим файлом json. Я отправлю часть своего json-файла (не целиком, потому что он слишком большой, более 100 тыс. Строк).

Manish Pant 14.09.2018 15:20

вот мой json файл jsfiddle.net/de85mpky

Manish Pant 14.09.2018 15:28

@devserkan проверьте этот файл json.

Manish Pant 14.09.2018 15:28

Если вы используете стрелочную функцию с блоком тела, с фигурными скобками вы должны явно вернуть его. Ставить возврат: return <h1 key={ a.id } className='heading'>{a.title}</h1>;

devserkan 14.09.2018 15:54

@devserkan по-прежнему ничего не произошло.

Manish Pant 14.09.2018 15:55

Это действительно странно. Даже если я использую ваш массив в другой скрипке, я могу получить список для заполнения: jsfiddle.net/5vjqabv3/6470. Это также не использует вызов fetch.

justDan 14.09.2018 15:59
2
8
2 032
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>
    );
}

Я не думаю, что вы можете использовать fetch () для локального файла. Вам нужно будет передать эти данные с URL-адреса, а затем получить их. Или вы можете просто импортировать этот json в свой компонент

nfranciosi 14.09.2018 22:52

также вы, вероятно, захотите выполнить выборку данных в componentDidMount

nfranciosi 18.09.2018 15:52
Ответ принят как подходящий

Прежде всего, есть несколько мест, которые вы должны изменить в своем коде.

  • Вы должны сохранить свойство массива в своем состоянии для всех фильмов: 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, а также проверьте консоль на наличие ошибок.

В обоих ответах на странице просто отображается пустое обведенное поле (из-за свойства css, прикрепленного к div). Я выложу часть своего json-файла. и консоль не показывает ошибок в обоих ответах.

Manish Pant 14.09.2018 15:18

@ManishPant, я видел JSON. Можете ли вы обновить свой вопрос с помощью текущего кода? Просто добавьте текущий, не заменяйте его. Кроме того, можете ли вы попробовать console.log в своем методе рендеринга? Чуть ниже вроде: render() { console.log( this.state ); return <div className="box">{this.renderMovies()}</div>;

devserkan 14.09.2018 15:41

Я зарегистрировал его в консоли, и он вернул объект с пустым массивом movieName

Manish Pant 14.09.2018 15:54

Я думаю, это из-за размера файла json, который у меня есть (250k + строк). Я попытался использовать случайный файл json из сети, и он отлично работает.

Manish Pant 14.09.2018 15:57

Можете как-нибудь поделиться? Вы можете попробовать импортировать его напрямую. Поместите оператор импорта в верхнюю часть вашего файла: import movies from "./MovieDatabaseShort.json"; Затем измените свое состояние следующим образом: this.state = { movies }; Затем удалите блок componentDidMount и попробуйте снова.

devserkan 14.09.2018 16:01

Я пробовал это локально с файлом JSON, который имеет 350 КБ строк, и это сработало. Это было медленно, мой браузер немного заглох, но в конце концов он заработал. Из-за его размера, возможно, вам понадобятся специальные методы синтаксического анализа JSON на вашей стороне. Кроме того, импорт напрямую, как я объяснил в комментарии выше, выполняется быстрее. Размер файла: 11M

devserkan 14.09.2018 16:48

Вы пробовали мой второй вариант ответа? Тот, с import и без fetch? Потому что это работает и для меня. И, давай, по крайней мере, проголосуй за и подумай о том, чтобы принять мой ответ за всю мою борьбу здесь :)

devserkan 15.09.2018 05:51

Спасибо за помощь :)

Manish Pant 15.09.2018 05:56

Другие вопросы по теме