Передать данные базы данных с сервера express.js в компонентact.js

Question

Это приложение реакции с бэкендом express.js. У меня есть база данных mysql, подключенная к моему файлу server.js, и кажется, что она подключена нормально. Моя проблема в том, что я хочу передать эти данные в мое приложение реакции и отобразить их там.

Подключение к моей базе данных server.js

app.get('api/listitems', (req, res) => {     

connection.connect();    
connection.query('SELECT * from list_items', (error, results, fields) => {    
    if (error) throw error;    
    res.send(results)    
});  
connection.end(); 

});

Так что это должно взять записи 'list_items' из базы данных

Ниже приведен мой кодact.js. Я хотел бы отобразить записи под списком продуктов h3.

import React, { Component } from 'react';
import './App.scss';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: ['first item']
    };

  }

  render() {
    return (
      <div className="App">
        <h3>Grocery List</h3>
        {this.state.data}
      </div>
    );
  }
}

export default App;

Я знаю, что это простая концепция, но я новичок в бэкэнд-разработке. Учебники, которые я нашел, привели меня к этому моменту, но у меня возникла проблема с нахождением учебника, в котором просто объясняется, как передавать и отображать данные из бэкэнда в веб-интерфейс.

Answer 1

**index.js**

import React from 'react';
import { render } from 'react-dom';
import App from './components/app';
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux';
import store, { history } from './store';

const route = (
  <Provider store={store}>
  <BrowserRouter>
        <App />
  </BrowserRouter>
  </Provider>
)
render(route,document.getElementById('app'))

**action/listItemAction.js**

export const ListItemSuccess = (data) => {
    return {type: 'GET_LIST_ITEMS'};
}

export const getListItems = () => {
    return (dispatch) => {
        return axios.get('http://localhost:5000/api/listitems')
        .then(res => {
           dispatch(ListItemSuccess(res));
        })
        .catch(error=>{
            throw(error);
        })      
    };
}

**reducers/listItems.js**

const listItems = (state = [], action) => {
  switch(action.type){
    case 'GET_LIST_ITEMS':
      return action.res.data;
    default:
      return state;
  }
}

export default listItems;

**store.js**

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk'
import listItems from './reducers/listItems.js';

const store = createStore(listItems,  compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : f => f
  ));

export default store;

**App.js**

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import './App.scss';
import getListItems from './action/listItemAction.js

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      isLoading: true,
    };

  }
  componentWillMount() {
    this.props.getListItems().then(() => {
      this.setState({data: this.props.listItems, isLoading:false});
    }).catch(error => {
        throw(error);
    });
  }
  render() {
    return (
      <div className="App">
        <h3>Grocery List</h3>
        {this.state.isLoading ? <p>Loading...</p>
          : this.state.error ? <p>Error during fetch!</p>
          : (
              <ul>
                this.state.data.map(item => <li>{item}</li>)
              </ul>
            )}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
    return {
      listItems: state.listItems
    };
};
const mapDispatchToProps = (dispatch) => {
    return {
        getListItems: bindActionCreators(getListItems, dispatch),
    };
};

export default connect(mapStateToProps,mapDispatchToProps)(App);

Answer 2

Вы хотите сделать GET-запрос к вашему бэкэнду для асинхронной выборки данных. Если вам нужны данные при первом монтировании компонента App, вы можете использовать fetch в componentDidMount для вызова вашей конечной точки бэкенда. Вот пример с loading отступлением и основной обработкой ошибок:

class App extends Component {
  state = {
    data: [],
    loading: true,
    error: false
  }
  ...
  componentDidMount() {
    // Pick whatever host/port your server is listening on
    fetch('localhost:PORT/api/listitems')
      .then(res => { // <-- The `results` response object from your backend
        // fetch handles errors a little unusually
        if (!res.ok) {
          throw res;
        }
        // Convert serialized response into json
        return res.json()
      }).then(data => {
        // setState triggers re-render
        this.setState({loading: false, data});
      }).catch(err => {
        // Handle any errors
        console.error(err);
        this.setState({loading: false, error: true});
      });
  }

  render() {
    return (
      <div className="App">
        <h3>Grocery List</h3>
        // The app will render once before it has data from the
        // backend so you should display a fallback until
        // you have data in state, and handle any errors from fetch
        {this.state.loading ? <p>Loading...</p>
          : this.state.error ? <p>Error during fetch!</p>
          : (
              <ul>
                this.state.data.map(item => <li>{item}</li>)
              </ul>
            )}
      </div>
    );
  }
}

fetch не будет отклонять состояние ошибки HTTP (404, 500), поэтому первое .then немного странно. .catch зарегистрирует здесь ответ со статусом, но если вы хотите увидеть сообщение об ошибке с сервера, вам нужно будет сделать что-то вроде этого:

if (!res.ok) {
  return res.text().then(errText => { throw errText });
}

См. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch для получения дополнительной информации или изучения других библиотек извлечения данных, таких как axios.