每次反应路由器加载数据答案

【问题标题】：React router loading data each time每次反应路由器加载数据
【发布时间】：2016-05-24 04:38:47
【问题描述】：

我是使用 React 和 React Router 的新手。

主页（主页组件）通过 ajax 请求将数据加载到显示数据的服务器。

然后人们可以使用反应路由器在应用程序中导航。但是当有人返回主页（主页组件）时，再次对服务器进行 ajax 调用，这是不必要的。

所以基本上当你在每次加载组件时使用 react 路由器在组件中导航时，每次都会进行 ajax 调用。

我们可以做些什么来缓存数据，就像在 Angular 中一样，我们不必在加载组件时一次又一次地进行 ajax 调用。

谢谢

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

  componentWillMount() {
      let length =  Object.keys(this.state.data).length;

      if(length === 0){
        let req = new Request('https://example.com/json', {
          mode: 'cors',
          method: 'get'
        });

        this.serverRequest = fetch(req).then(function (result) {
          return result.json()
        }).then(function(j){
          this.setState({
            data: j.up
          })

        }.bind(this));

      }
  }

render(){
    return(
    some html
    )
}

【问题讨论】：

你能发布一些代码来说明这个问题吗？
我假设你已经仔细阅读过这个问题：stackoverflow.com/questions/34347481/…
我没有使用redux，所以基本上我必须创建一个父组件并将这个组件添加为子传递数据作为道具？
简短的回答是：您需要一个地方来存储数据。无论是在顶级/共享组件中，还是在 React 之外的一些存储，如 redux / mobx 等，甚至可能是本地存储。

标签： javascript angularjs ajax reactjs

【解决方案1】：

您可能希望将所有状态存储在最顶层的应用程序组件中，该组件应仅在页面重新加载时重新安装。这样状态就可以保留在那里，并传递给子组件。

如果它是一个更大的项目，您可以考虑在 React 旁边使用状态管理系统，例如 redux。

另一个想法是将您的 ajax 函数移到它们自己的模块中，然后将其导入到您的组件中。然后你可以在你的 ajax 模块中放置一些缓存，远离你的组件。

【讨论】：