MERN применяет href для рендеринга / возврата - PullRequest
Новая
       15

MERN применяет href для рендеринга / возврата

1 голос
/ 13 марта 2020

Я прогрессирую в стеке MERN, когда столкнулся с проблемой отображения некоторых данных в виде ссылки на страницу.

Я могу вернуть данные на экран, пока только в неупорядоченном списке.

Вот код: 

import React, { Component } from 'react';
import './customers.css';

class Customers extends Component {
  constructor() {
    super();
    this.state = {
        customers: []
    }
}

componentDidMount() {
    fetch( '/api/customers')
        .then(res => res.json())
        .then(customers => this.setState({customers}, () => console.log('Customers fetched..', customers)));
}

render() {
  return (
        <div>
         <h2>Customers</h2>
          <ul>
            {this.state.customers.map(customer => 
                <li key={customer.id}>{ customer.firstName } { customer.lastName } - <a href={ customer.email }>{ customer.email }</a></li>
                                                                                     // ^^ problem is here ^^
            )}
          </ul>
        </div>
    );
  }
}

export default Customers;

Все работает, пока я не добавлю href в элемент списка выше.

Ошибка, которую я получаю в консоли, следующая: 

 Proxy error: Could not proxy request /api/customers from localhost:3000 to http://localhost:5000/.

Страница изначально загружается пустой, но когда я перефразирую sh, данные появляются вместе с электронным письмом в формате href.

Как предотвратить возникновение этой ошибки?

Редактировать

Вот пакет. json в моей папке клиента: 

{
 "name": "client",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
   "react": "^16.13.0",
   "react-dom": "^16.13.0",
   "react-scripts": "3.4.0"
},
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},
"proxy": "http://localhost:5000",
"eslintConfig": {
  "extends": "react-app"
},
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
 }
}
...