Я создаю простую выборку данных, используя 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-странице

1
Shinichi1988

2 ответа

Похоже, вы устанавливаете 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 , это зависит от того, какое имя вы хотите использовать.

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

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

  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;
58577733