Javascript 在react中向表显示数据json

我将用react js构建一个web。我是个新手，所以我在制作

CRUD

时遇到了一个问题。首先，我想向表中显示一些数据

json

。我有一个名为

keranjang.js

的文件.js。它包含用于显示表的jsx。我还有另一个名字叫

barang.js

，我想用名为

tampildata（）

的方法来填充它，该方法用于保存json数据，例如

{“nama_barang”：“bolu”，“harga”：“10000”}

。我怎么写这个方法？我如何调用方法和数据来将数据显示到

keranjang.js

中的现有表中？希望每个人都能帮助我。

我假设您试图在当前组件中调用外部文件的方法。在

barang.js文件中导出保存json数据的函数，如

export function 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")
);

从“React”导入React；
从“react dom”导入react dom；
从“barang”导入{tampildata}；
类TableComponent扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
json:[]
}
}
componentDidMount（）{
this.setState（（prevState）=>{
返回{
json:tampildata（）
}
})
}
render（）{
返回(
名字
姓
{this.state.json.map（（数据，i）=>{
返回(
{data.firstname}
{data.lastname}
)
})}
)
}
}
ReactDOM.render(
, 
document.getElementById（“应用程序”）
);

这是工作表。希望这对你有帮助
 我假设您试图在当前组件中调用外部文件的方法。在
barang.js文件中导出保存json数据的函数，如

export function 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")
);

从“React”导入React；
从“react dom”导入react dom；
从“barang”导入{tampildata}；
类TableComponent扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
json:[]
}
}
componentDidMount（）{
this.setState（（prevState）=>{
返回{
json:tampildata（）
}
})
}
render（）{
返回(
名字
姓
{this.state.json.map（（数据，i）=>{
返回(
{data.firstname}
{data.lastname}
)
})}
)
}
}
ReactDOM.render(
, 
document.getElementById（“应用程序”）
);

这是工作表。希望这对你有帮助
 您可以发布一些代码来显示您已经尝试过的内容吗？您正在尝试访问一个js文件中返回json的方法，并希望在另一个具有表ui的js文件中显示该json。正确吗？是的，你是对的，布罗克，你可以发布一些代码来显示你已经尝试过的内容吗？你正在尝试访问一个js文件中存在的返回json的方法，并希望在另一个具有表ui的js文件中显示该json。对吗？是的，你说得对brohey，但是我在从第一个.js文件导出方法时遇到了问题。如何导出该方法？这是..导出函数tampildata（）{}。。确切地说是为了写它？因为有错误。它说“意外标记”是这样的
export function tampildata（）{}
export方法和import方法作为
import{tampildata}从'barang'导入。请查看更新的答案，这将帮助您！确保您的网页包配置中有
预设：['es2015'，'react'，'babel-preset-stage-0']
。我如何配置网页包？这是一个很好的来源，嘿，但是我在从第一个.js文件导出方法时遇到问题。如何导出该方法？这是..导出函数tampildata（）{}。。确切地说是为了写它？因为有错误。它说“意外标记”是这样的
export function tampildata（）{}
export方法和import方法作为
import{tampildata}从'barang'导入。请查看更新的答案，这将帮助您！请确保您的网页配置中有
预设：['es2015'，'react'，'babel-preset-stage-0']
。我如何配置网页？以下是好的源代码