更改json文件时刷新显示reactjs答案

【问题标题】：Refresh display reactjs when changes the json file更改json文件时刷新显示reactjs
【发布时间】：2017-11-12 11:44:53
【问题描述】：

早上好：我是 Jose，我在 Reactjs 中设计了一个小组件，数据源位于 json 文件中。我的问题是我的组件没有检测到这个 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')
);

【问题讨论】：

标签： json reactjs refresh

【解决方案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>

【讨论】：