Получаемые данные не отображаются в браузере с использованием ReactJS - PullRequest
Новая
       0

Получаемые данные не отображаются в браузере с использованием ReactJS

1 голос
/ 27 октября 2019

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

Я добавил еще один пакет "node-fetch", но тоже нетработает.

Вот мой код в App.js 

import React, { Component } from 'react';
import Navbar from '../src/components/Navbar';
import './App.css';
import fetch from 'node-fetch';

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

  componentDidMount() {
    fetch('http://localhost:4000')
      .then(res => res.json())
      .then(tbl_barang => this.setState({data: tbl_barang}, () => console.log('Customers fetched...', tbl_barang)));
  }

  render() {
    return (
      <div className='App'>
        <Navbar />
        <h1>Daftar Barang</h1>
        <ul>
        {this.state.tbl_barang.map(tbl_barang =>
          <li key={tbl_barang.id}>
            {tbl_barang.tipe_barang}
            {tbl_barang.product_name}
          </li>
        )}
        </ul>

        <button> Click disini </button>
      </div>
    );
  }
}

export default App;

, а вот код для получения данных из MySQL 

const path = require ('path');
const mysql = require ('mysql');

module.exports = function (app, connection) {
    //if no matching path, back to index.html
    app.get('/', function(req, res){
        connection.query('SELECT id, tipe_barang, product_name FROM tbl_barang', function (err, data){
            (err)? res.send(err):res.json ({data});
        })
    })
}

Я ожидал данных массиваотобразить на html странице

Ответы [ 2 ]

0 голосов
/ 27 октября 2019

Похоже, вы устанавливаете state.data вместо state.tbl_barang. Чтобы исправить это, измените ваше тело componentDidMount(): 

componentDidMount() {
    fetch('http://localhost:4000')
      .then(res => res.json())
      .then(tbl_barang => this.setState({tbl_barang: tbl_barang.data}, () => console.log('Customers fetched...', tbl_barang)));
}

Вы также можете обновить свой компонент, чтобы использовать вместо него свойство state.data, это зависит от того, какое имя вы хотите использовать.

0 голосов
/ 27 октября 2019

Как правило, вы хотите иметь два компонента, App и для данных, функция карты должна указывать на компонент Item, и вы можете передавать реквизиты дочернему элементу.

Так что в вашем рендере измените на... 

  render() {
   return (
   <div className='App'>
    <Navbar />
    <h1>Daftar Barang</h1>
    {this.state.tbl_barang.map(tbl_barang =>
      <TableItem key={tbl_barang.id} tbl_barang={tbl_barang} />
    }
    )}

Затем создайте компонент TableItem, я обычно делаю отдельный файл для этого компонента. 

const TableItem = ({ tbl_barang }) => {
    return (
        <div>
            {tbl_barang.tipe_barang}
            {tbl_barang.product_name}
        </div>
    )
}

export default TableItem;
...