在表中顯示數據json到react

Question

我將用react js構建一個Web。 我剛起步，所以制作CRUD遇到問題。 首先，我想向表顯示一些數據json 。 我有一個名為keranjang.js文件.js。 它包含顯示表的jsx。 並且我還有另一個名為barang.js並希望使用名為tampildata()的方法填充它，該方法用於保存json數據，例如{"nama_barang" : "bolu", "harga" : "10000"} 。 我該如何寫方法？ 以及如何調用方法和數據以將數據顯示到keranjang.js的現有表中？ 希望每個人都能幫助我。

Answer 1

我假設您嘗試在當前組件中調用外部文件的方法。 在您的barang.js文件中，導出包含json數據的函數，例如

export function tampildata() {
    return [{ "firstname": "first", "lastname": "f"}, {"firstname": "second", "lastname": "l"}];
}

要么

export default {
  tampildata() {
    return [{ "firstname": "first", "lastname": "f"}, {"firstname": "second", "lastname": "l"}];
  }
};

然后在您的keranjang.js文件中導入tampildata方法，並在componentDidMount調用該方法，並設置狀態，如下所示

import React from 'react';
import ReactDOM from 'react-dom';
import { tampildata } from 'barang';

class TableComponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            json: []
        }
    }

    componentDidMount() {
        this.setState((prevState) => {
            return {
                json: tampildata()
            }
        })
    }

    render() {
        return (
            <div>
                <table>
                    <thead>
                        <th>First Name</th>
                        <th>Last Name</th>
                    </thead>
                    <tbody>
                        {this.state.json.map((data, i) => {
                            return (
                                <tr key={i}>
                                    <td>{data.firstname}</td>
                                    <td>{data.lastname}</td>
                                </tr>
                            )
                        })}
                    </tbody>
                </table>
            </div>
        )
    }
}


ReactDOM.render(
  <TableComponent />, 
  document.getElementById("app")
);

這是工作的jsfiddle 。 希望這對您有幫助！