Ошибка извлечения из реакции на express без CRA (создание-реакция-приложение) - PullRequest
Новая
       16

Ошибка извлечения из реакции на express без CRA (создание-реакция-приложение)

0 голосов
/ 07 апреля 2020 
import React,{Component} from 'react';
import '../styles/App.css';

class App extends Component{
  constructor() {
    super();
    this.state = {
      products: []
    };
  }
  componentDidMount() {
    fetch('http://localhost:4000/products', {
      method: 'GET',
      mode: "no-cors",
      headers: {"Content-Type": "application/json"}
    }).then(res => {console.log(res);res.json()})
      .then(products => this.setState({products}));
  }

  render() {
    return (
      <div>
        <h1>Hello, react.js!!!</h1>
        <ul>
        {this.state.products.map(product => <li>{product.product_name}</li>)}
        </ul>
      </div>
    );
  }
}

export default App;

express. js порт прослушивания 4000. Это express. js part 

app.get("/products", (req, res) => {
    conn.query('SELECT * FROM products', (err, result) => {
        if(err) {throw err;}
        console.log(result);

        res.json(result);
    });
});

Если я просто наберу в адресной строке http://localhost: 4000 / products , тогда я получу ответ json, но в приложении компонента отреагирует. JS fetch вернет ошибку, поскольку ответ содержит пустое тело, что означает, что адрес был недоступен. Эта ошибка связана с CORS, но я не знаю, как ее исправить.

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

Приложение. js использует fetch для доступа к express

вот журналы ошибок, это происходит потому, что тело в запросе пустое, то есть ответ приходит с пустым телом enter image description here

Ответы [ 2 ]

0 голосов
/ 07 апреля 2020

Вам не нужно this.componentDidMount();. Удалить эту строку. Он будет выполнен автоматически, как часть жизненного цикла реагирующего компонента.

0 голосов
/ 07 апреля 2020

Что происходит, если ваш код не ждет завершения вызова sh.

Вы можете использовать async-await функциональность.
Эта ссылка может помочь: https://www.valentinog.com/blog/await-react/

Редактирование и добавление образца в качестве OP не позволяет получить ссылку.
Попробуйте это: 

  async componentDidMount() {
const response = await fetch('http://localhost:4000/products', {
      method: 'GET',
      mode: "no-cors",
      headers: {"Content-Type": "application/json"}
    });
    const json = await response.json();
    // Do stuff with json
    console.log(json);
    this.setState(json);
  }

Как просто, это может также работать, но, пожалуйста, проверьте: 

  async componentDidMount() {
    await fetch('http://localhost:4000/products', {
      method: 'GET',
      mode: "no-cors",
      headers: {"Content-Type": "application/json"}
    }).then(res => {console.log(res);res.json()})
      .then(products => this.setState({products}));
  }

Вы также включили CORS в своем проекте express?

...