データをjsonと表を反応させて表示する

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ファイルで

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

または

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

のようなJSONデータは、その後、あなたの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があります。これがあなたに役立つことを願っています！