Question

我打算建立一个带有反应js的网络。我很反应，所以我有问题要CRUD。首先，我想向表格显示一些数据json。我有名为keranjang.js的.js文件。它包含jsx来显示表。我有另一个名为barang.js的用户，并希望用名为tampildata()的方法填充它，用于保存例如{"nama_barang" : "bolu", "harga" : "10000"}的json数据。我怎么写这个方法？以及如何调用方法和数据将该数据显示在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。希望这会对你有所帮助！

将数据json显示到表中

1 个答案: