使用 ReactJS 获取数据不显示在浏览器上

Question

I am creating a simple fetching data using ReactJS and MySql as my database. For connection between front end and the back, I am using express, everything is okay with array data appear in console.log but not in html page.

I am added another package "node-fetch" but also not working.

Here is my code on 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;

and here is the code to get the data from 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});
        })
    })
}

I expected the array data display on the html page

Answer 1

It looks like you're setting state.data instead of state.tbl_barang . To fix this, change your componentDidMount() body:

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)));
}

You could also update your component to use the state.data property instead, this depends on what name you want to use.

Answer 2

Normally you would want to have two components, App and for the data the map function should point to an Item component, and you can pass the props down to the child.

So in your render change to...

  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} />
    }
    )}

Then make a TableItem component, I usually make a separate file for this component.

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

export default TableItem;