在表中显示数据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 。 希望这对您有帮助！