反应加载数据从DB和存储在状态只有一次

所以这是我的情况。我有一个从数据库加载一些数据，像这样的组件：反应加载数据从DB和存储在状态只有一次

const task= fetch(`http://example.com`) 
     .then(result => result.json()) 
     .then(result => { 
      this.setState({ 
       items: result 
      }) 
     }); 

     addTask(task);

现在，如果我这个代码添加到componentWillMount方法，但没有工作，我每次加载该组件时，这种方法会火我不想每次都调用数据库。我希望它在第一次加载时调用一次，然后将其存储在状态中，而不再重新调用。

而且因为我渲染的项目清单，我必须手动设置在构造这个items变量，以避免null错误：

constructor() { 
    super(); 
    this.state = { 
     items: [], 
    } 
}

我的问题是，我怎么能只有一次加载这个数据和然后将其设置为items状态变量。我已经尝试将所有代码添加到组件的缩减器中（我正在使用redux），但它不起作用。

来源

2017-10-08 dsthetics

您可以检查你的终极版的状态数据，如果存在数据不要称呼它，是这样的：

componentWillMount() { 
    if (!this.props.data) { 
    const task= fetch(`http://example.com`) 
    .then(result => result.json()) 
    .then(result => { 
     this.setState({ 
      items: result 
     }) 
    }); 

    addTask(task); 
    } 
}

来源

2017-10-08 12:31:51

问题是，每次组件加载时，构造函数都会触发并将'items'设置为[]。 – dsthetics

哦，我很抱歉，我认为这不是使用redux的好方法...您是否可以访问您的redux状态？ –

有达到你正在尝试做的几种方法，但他们每个每个带来提出更多的问题来回答我的想法。

第一个问题是，假设您在第一次读取后在本地存储数据，如果服务器上的数据发生变化，会发生什么？您可以通过某种方式通知客户端数据已更改，然后再次获取数据以同步本地数据。或者，也许你可以定期检查新的数据。有很多方法可以去。

如果您将数据加载到父组件并将数据传递给要使用该组件的数据或使用持久性Redux或类似解决方案，则会出现此情况。

你可以使用像Realm，Firebase或类似的3库解决方案。这些系统具有永久或本地存储选项，可在您拨打数据时减少下载。但是这些解决方案需要改变你的后端逻辑。

就像我之前说过的那样，没有一种方法可以处理这些情况，它取决于您的项目和偏好。

来源

2017-10-08 12:39:04 bennygenel

反应加载数据从DB和存储在状态只有一次

回答

相关问题