Question

所以这是我的情况。我有一个从数据库加载一些数据的组件，如下所示：

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状态变量。我已经尝试将所有这些代码添加到组件的reducer中（我正在使用redux），但它不起作用。

Answer 1

您可以检查您的redux状态中的数据，如果存在数据则不要调用它，如下所示：

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

    addTask(task);
  }
}

Answer 2

有几种方法可以实现你想要做的事情，但是每一种方法都会提出更多我想回答的问题。

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

如果您在父组件上加载数据并将数据传递给将要使用它的组件或使用持久性redux或类似解决方案，则存在这种情况。

您可以使用Realm，Firebase或类似的3库解决方案。这些系统具有持久性或本地存储选项，可在您调用数据时减少下载。但是这些解决方案提出了改变后端逻辑的需求。

就像我之前所说的，没有一种方法可以处理这些情况，这实际上取决于你的项目和偏好。

来自DB＆amp;的反应负载数据只在州内存储一次

2 个答案: