Как обратиться к JSON файлу через JS react?

Question

[Александр Иванов]

Так выводятся новости

const news = [
  {
    title: 'Саша Печкин',
    text: 'В четверг, четвертого числа...'
  },
  {
    title: 'Просто Вася',
    text: 'Считаю, что $ должен стоить 35 рублей!'
  },
  {
    title: 'Гость',
    text: 'Бесплатно. Скачать. Лучший сайт - http://localhost:3000'
  }
];

class News extends React.Component{
    render (){
        return (
            <div classNews="news">
                {this.props.items.map((item, index) =>
                    <blockquote>
                        <h4>{item.title}</h4>
                        <p>{item.text}</p>
                    </blockquote>
                )}
            </div>
        )
    }
}

ReactDOM.hydrate(
    <News items={news} />, 
    document.querySelector('.content')
);

Я хочу вынести их в отдельный json файл, но не понимаю как в таком случает к нему обратиться
допустим файл называется json.json

Comments

[Александр Иванов]

Нет я конечно могу переназвать файл в json.js подключить как JS отдельный файлом и прописать const news = переред [
Но это же бред, и 100% в адекватном варианте так не поступают

Answer 1

[Петр Мухуров]

в News создать state = { news: null }, положить файл, в componentDidMount() зафетчить его и положить json в this.state.news

Comments

[Александр Иванов]

https://reactjs.org/docs/faq-ajax.html - видимо это ваш пример попробую

[Петр Мухуров]

cimonlebedev, это он и есть)

[Александр Иванов]

pterodaktil, т.к. на моём сервере нет node это и стало решением )
К сожалению без ноды import не работает а это был самый простой способ ))

Answer 2

[Антон]

Как правило, вместе с реактом используется вебпак как бандлер. Он по-умолчанию может импортировать json файл как объект.

import news from "./news.json";

// ...

<div classNews="news">
                {news.map((item, index) =>
                    <blockquote>
                        <h4>{item.title}</h4>
                        <p>{item.text}</p>
                    </blockquote>
                )}
            </div>
// ...

Если файл слишком большой, чтобы класть его в бандл, можно воспользоваться асинхронным импортом.

Comments

[Александр Иванов]

Спасибо наверное ваш подход и будет решением, буду пробовать )

[Александр Иванов]

Антон , import news from 'полный путь' - такое ощущение что вообще импорт не работатет
Я закоментировал const news и оставил import всё перестаёт работать, стоит только подключить импорт
json.json

[
   {
        "title": "Саша Печкин",
        "text": "В четверг, четвертого числа..."
    },
    {
        "title": "Просто Вася",
        "text": "Считаю, что $ должен стоить 35 рублей!"
    },
    {
        "title": "Гость",
        "text": "Бесплатно. Скачать. Лучший сайт - http://localhost:3000"
    }
]

[Александр Иванов]

Антон подключаю как type="text/babel"

[Антон]

cimonlebedev, значит, вы не используете webpack. Для новичка подойдет create-react-app, там все работает из коробки.

[Александр Иванов]

Антон, спасибо

Answer 3

[Ken Jee]

Ваш файл json.json должен лежать на сервере и вы должны обратиться к нему через ajax-запрос. Погуглите: react axios