데이터를 json과 테이블로 표시

Question

나는 반응하는 js로 웹을 만들 예정이다. 나는 반응하기 매우 새로 워서 CRUD을 만드는 데 문제가있다. 처음에는 테이블에 json 데이터를 표시하고 싶습니다. 파일 이름이 keranjang.js 인 .js 파일이 있습니다. 그것은 테이블을 표시하는 jsx를 포함합니다. 그리고 다른 이름이 barang.js이고 tampildata()이라는 메서드로 채우고 싶습니다. 예를 들어 {"nama_barang" : "bolu", "harga" : "10000"}과 같은 json 데이터를 보유하고 있습니다. 어떻게 작성합니까? 방법 및 데이터를 호출하여 해당 데이터를 기존 표에 keranjang.js으로 표시하려면 어떻게해야합니까? 모두가 나를 도와주기를 바랍니다.

Answer 1

현재 구성 요소에서 외부 파일의 메서드를 호출하려고한다고 가정합니다. 당신의 barang.js 파일에 tampildata 방법을 가져

아래 같은 그 componentDidMount의 방법 및 설정 상태를 호출하여 keranjang.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 데이터를 보유 함수를 내보낼

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입니다. 희망이 당신을 도울 것입니다!