Как я могу получить и отобразить данные Mysql в ReactJS интерфейсе с Node JS в качестве внутреннего интерфейса? - PullRequest
Новая
       22

Как я могу получить и отобразить данные Mysql в ReactJS интерфейсе с Node JS в качестве внутреннего интерфейса?

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

Попытка выяснить, как извлечь данные из mysql и отобразить их в ReactJS. Я использую NodeJS на сервере вместе с express. Я попробовал фрагмент кода, найденный в inte rnet, но он не работает так, как ожидается.

Вот что я получаю, когда запускаю приложение реагирования. 

TypeError: http.ServerResponse is undefined

Мой NodeJS код 

//require mysql, http and express
//const connection = createConnection({with host, user, pass, db});
const app = express();
app.get('/posts', function(request, result){
    connection.connect();
    connection.query("SELECT * FROM 'some_table';", function(err, results, fields){
         if(err) throw err;
        result.send(results);
    })
    connection.end();
})
app.listen(3000);

Мой код React 

class Display extends React.Component{
    constructor(props){
        super(props);
        this.state={ posts : [] };

        fetch('http://localhost:3000/posts/')
            .then(response =>{
                response.json();
            })
            .then(posts => {
                this.setState({posts})
            })
            .then( (err) => {
                console.log(err);
            })
    }
    render(){
        return(
            <div>
                <ul>
                    {this.state.posts.map( post => 
                    <p>
                        <li>Some Text_1: {post.db_col_1}</li>
                        <li>Some Text_2: {post.db_col_2}</li>
                        <li>Some Text_3: {post.db_col_3}</li>
                    </p>
                    )}
                </ul>
            </div>
        )
    }
}
export default Display;

Ответы [ 2 ]

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

Ваш код нуждается в некоторой обработке ошибок и политике CORS. Поэтому я бы порекомендовал вам:

Убедитесь, что ваш бэкэнд запущен и работает

Вам нужно проверить порты на бэкенде.

Убедитесь, что база данных запущена и работает

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

Попробуйте результаты API через Postman или любой другой инструмент

Вам необходимо убедиться, что ваш бэкэнд доступен через любое другое клиентское приложение. Вы также можете открыть браузер и протестировать свой API, открыв ссылку в браузере 'http://localhost: 3000 / posts '

Активировать политику CORS для своего бэкэнда.

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

Использовать библиотеку выборок

Вы можете использовать fetch, но это не поддерживается всеми браузерами. Было бы хорошо, чтобы Ax ios или любой другой инструмент запроса на вашем клиентском коде. 

const cors = require('cors')
const app = express();

const mysql = require('mysql');

const connection = mysql.createConnection({
  host: "localhost",
  user: "yourusername",
  password: "yourpassword"
});

connection.connect(function(err) {
  if (err) throw err;
  console.log("Connected!");
});

app.use(cors());

app.get('/posts', (req, res) => {
  connection.query("SELECT * FROM 'some_table';", (err, results, fields) => {
    if(err) throw err;
    res.send(results);
  });
});

app.listen(3000, (error) => {
  if (err) throw err;
  console.log(`App listening on port ${port}!`)
});
1 голос
/ 29 марта 2020

Согласно документации React , конструктор для компонента React вызывается перед его монтированием. В нем также говорится следующее:

Избегайте введения каких-либо побочных эффектов или подписок в конструкторе. В этих случаях используйте вместо этого componentDidMount ().

Вы должны выполнять вызовы API в componentDidMount . Согласно документации React:

Если вам нужно загрузить данные с удаленной конечной точки, componentDidMount - это хорошее место для создания экземпляра сетевого запроса.

Ваш код должен выглядит следующим образом: 

import React from "react";

class Display extends React.Component {
  constructor(props) {
    super(props);

    this.state = { posts: [] };
  }

  componentDidMount() {
    fetch("http://localhost:3000/posts/")
      .then(response => {
        response.json();
      })
      .then(posts => {
        this.setState({ posts });
      })
      .then(err => {
        console.log(err);
      });
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.posts.map(post => (
            <p>
              <li>Some Text_1: {post.db_col_1}</li>
              <li>Some Text_2: {post.db_col_2}</li>
              <li>Some Text_3: {post.db_col_3}</li>
            </p>
          ))}
        </ul>
      </div>
    );
  }
}

export default Display;

Приведенный выше фрагмент будет работать при условии, что ваше фоновое приложение Node.js возвращает правильные данные.

...