0

Пытаюсь реализовать приложение на 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;

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

1
  • а какая нибудь ошибка есть в консоли? я думаю дело в CORS...) Commented 15 апр. 2019 в 6:28

1 ответ 1

2

Опечатка {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;

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.