json 파일을 바꿀 때 화면 표시가 새로 고침

Question

안녕하세요 : 저는 Jose입니다. json 파일의 Reactjs에 작은 구성 요소를 설계했습니다. 내 문제는 내 구성 요소가이 json 파일의 변경 내용을 검색하지 않으며 콘텐츠가 정적 상태로 유지된다는 것입니다. 당신의 도움에 대한

감사

코드는 다음과 같습니다

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import axios from 'axios' 
import './index.css'; 

class TableUser extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     data: [] 
    }; 
    } 


    componentDidMount(){  
    axios 
     .get('http://myhost/procesos_arbol.json', 

    ) 

     .then(({ data })=> { 
     console.log(data); 
     this.setState({ 
      data: data 
     }); 
     }) 
     .catch((err)=> {console.log('no recibido')}) 
    } 

    render() { 
    const child = this.state.data.map((el) => { 
     return <div> 
     <p>key={ el.nid } | Título - { el.title } | 
     padre - {el.parent}</p> 
     </div> 
    }); 

    return <div> 
     <div>{ child }</div> 
    </div>; 
    } 
} 

ReactDOM.render(
    <TableUser />, 
    document.getElementById('container') 
); 

Answer 1

하나의 솔루션은 JSON 파일에서 데이터를 다시 가져 오기 및 상태마다 n 초를 업데이트 간격을 만드는 것입니다.

let data = [{nid: 1, title: 'A'}, {nid: 2, title: 'B'}] 
 

 
class TableUser extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = {data: []}; 
 
    } 
 

 
    componentDidMount(){ 
 
    let fetchData =() => { 
 
     Promise.resolve(data).then(data => { 
 
     this.setState({data}) 
 
     }) 
 
    } 
 
    
 
    fetchData() 
 
    this.update = setInterval(fetchData, 2000) 
 
    } 
 
    
 
    componentWillUnmount() { 
 
    clearInterval(this.update) 
 
    } 
 

 
    render() { 
 
    const child = this.state.data.map((el) => { 
 
     return <div key={el.nid}> 
 
     <p>key={ el.nid } | Título - { el.title }</p> 
 
     </div> 
 
    }); 
 

 
    return <div> 
 
     <div> 
 
     { child } 
 
     <button 
 
     onClick={() => { 
 
      data.push({nid: 3, title: 'C'}) 
 
     }} 
 
     >Add Data</button> 
 
     </div> 
 
    </div>; 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <TableUser />, 
 
    document.getElementById('app') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 

 
<div id="app"></div>