Как вывести JSON на страницу?

Question

[GS-3018]

Столкнулся с проблемой, не получается вывести JSON данные по api. Варианты, которые предлагали здесь в подобных вопросах, так же не решают проблемы. Возможно нужен какой-то дополнительный пакет?

package.json

{
  "name": "react-ssr",
  "version": "0.1.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start-dev": "NODE_ENV=development webpack -w & NODE_ENV=development node server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.4",
    "react": "^15.6.2",
    "react-dom": "^15.6.2",
    "react-fetch": "0.0.9",
    "react-router": "^5.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^7.2.6",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-react-app": "^3.1.2",
    "bootstrap": "^4.3.1",
    "cors": "^2.8.5",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.2",
    "jquery": "^3.4.0",
    "mongoose": "^5.5.3",
    "mysql": "^2.17.1",
    "node-sass": "^4.11.0",
    "popper.js": "^1.15.0",
    "postcss-loader": "^2.1.6",
    "react-bootstrap": "^1.0.0-beta.8",
    "react-router-dom": "^5.0.0",
    "reactstrap": "^8.0.0",
    "sass-loader": "^7.1.0",
    "serialize-javascript": "^1.7.0",
    "style-loader": "^0.23.1",
    "webpack": "^3.12.0"
  }
}

Исполняемый файл

import React, {Component} from 'react';

class Aktsii extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [],
      isLoaded: false,
    }
      
  }
componentDidMount() {
    fetch('http://jsonplaceholder.typicode.com/users')
    .then(res => res.json())
    .then(json => {
    this.setState({
        isLoaded: true,
        items: json,
    })
    }
         
    )
}
  render() {
    var { isLoaded, items} = this.state
    if (!isLoaded) {
        return <div>load</div>
    }
    else {
    return (
    <div>{items.map(item => (
          <li key={item.id}>   
        Name: {item.name}
         </li>
          ))}</div>
    );
    }
  }
}

export default Aktsii;

Comments

[Антон Спирин]

Опечатка в переменной isLoaded. Этот класс ошибок устраняет использование TypeScript в проекте.

[GS-3018]

Антон Спирин, К сожалению, исправление опечатки не решает проблему. Благодарю Вас за ответ!

Answer 1

[0xD34F]

isLoaded: false,

if (!isloaded) {

Так как всё-таки правильно - Loaded или loaded?

UPD. Исправлено.

Comments

[GS-3018]

Благодарю, исправил, к сожалению, это не решило проблему
Выводится:

if (!isLoaded) {
        return <div>load</div>
}

[0xD34F]

Ошибки есть? - откройте консоль и посмотрите.

[GS-3018]

0xD34F, нет

При загрузке только

(node:2095) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security  and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
Server is listening on port: 3000

Webpack is watching the files…

(node:2094) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumber                                    OfModules/mapModules/forEachModule/containsModule instead.

[0xD34F]

Добавил в ответ ссылку на рабочий вариант. Смотрите, сравнивайте со своим.

[Антон Спирин]

0xD34F, у автора в примере протокол http в запросе.

Answer 2

[Антон Спирин]

Исправленная версия.
1. Изменен протокол с http на https.
2. Исправлена опечатка в переменной isLoaded(было isloaded).

Так же для повышения читаемости переменная isLoaded заменена на isFetching и убран необязательный блок else.

Comments

[GS-3018]

К сожалению, на моей сборке не работает

[Антон Спирин]

GS-3018, а для чего вы используете сборку с устарелыми версиями библиотек? Вы знаете, что у вас используется SSR? Вам было бы проще сгенерировать себе приложение с помощью create-react-app.
1. Скиньте ссылку на сборку. Весь код.
2. Скиньте ошибки, которые выпадают в консоли.
3. Посмотрите, что происходит на вкладке network. Проходит ли запрос. Что в ответе.

[GS-3018]

Антон Спирин, Для того, чтобы генерировались страницы для SEO

[Антон Спирин]

GS-3018, вы ошибки в консоли и вкладку network посмотрели?

Я не видел кода сборки, но по одному только списку пакетов могу сказать, что сборка сомнительная.
С fetch в componentDidMount у вас плюсов для SEO не будет, так как componentDidMount выполняется только на стороне клиента. Вам стоит посмотреть в сторону next.js - простое и удобное решение для новичка.
Если же, все-равно хотите попробовать написать свою сборку для SSR, то рекомендую использовать в ней пакеты axios и react-frontload.

[GS-3018]

Антон Спирин, Благодарю Вас