Пустой экран json-сервер с ReactJS?

130
27 января 2020, 09:20

Пытаюсь реализовать приложение на ReactJS с использованием json-сервера. Захожу на localhost:3001 и localhost:3000 - пустота. Где я допустил ошибку?

Порядок моих действий:

Создаю проект

$ npx create-react-app my-app
$ cd my-app

Устанавливаю сервер

$ npm install -g json-server

Запускаю сервер и приложение

$ json-server --watch db.json --port 3001
$ npm run start

А затем настройка App.js

import React, { Component } from 'react';
import './App.css';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    };
  }
  componentDidMount() {
    let url = "http://localhost:3001/posts"
    fetch(url)
      .then(resp => resp.json())
      .then(data => {
        let posts = data.map((post, index) => {
          return (
            <div key={index}>
              <h3>{post.title}</h3>
              <p>Tags: {post.tags}</p>
            </div>
          )
        })
        this.setState({posts: posts});
      })
  }
  render() {
    return (
      <div className="App">
        {this.state.props}
      </div>
    );
  }
    }
export default App;

Где я допустил ошибку?

Answer 1

Опечатка {this.state.props}, вместо {this.state.posts}.

import React, { Component } from 'react';
import './App.css';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    };
  }
  componentDidMount() {
    let url = "http://localhost:3001/posts"
    fetch(url)
      .then(resp => resp.json())
      .then(data => {
        let posts = data.map((post, index) => {
          return (
            <div key={index}>
              <h3>{post.title}</h3>
              <p>Tags: {post.tags}</p>
            </div>
          )
        })
        this.setState({posts: posts});
      })
  }
  render() {
    return (
      <div className="App">
        {this.state.posts}
      </div>
    );
  }
    }
export default App;
READ ALSO
vue.js axios отправка формы

vue.js axios отправка формы

Пытаюсь отправить форму через axios, судя по devtools форма уходит, все заголовки и request payload там есть, но в php файле принять данные не получаетсяМассив...

110
Uncaught TypeError: Cannot read property &#39;getAttribute&#39; of undefined at move (script.js:112) at script.js:156

Uncaught TypeError: Cannot read property 'getAttribute' of undefined at move (script.js:112) at script.js:156

Проблема в том, что, когда вы вызываете figureBody[0]getAttribute('posX'), массив figureBody пустой, и figureBody[0] = undefined

122
Добавление объекта в JSON с сохранением cookie

Добавление объекта в JSON с сохранением cookie

При клике на кнопку в JSON должен записываться дополнительный объект, но получается что объект просто перезаписывается при клике сохраняя...

126
Как принимать постбеки от партнерки в счетчике (Яндекс Метрика или Рейтинг Mail)?

Как принимать постбеки от партнерки в счетчике (Яндекс Метрика или Рейтинг Mail)?

Основной вопрос - как учитывать конверсии в счетчике, если сайт не твойДанные о них можно получить от ПП через postback

198