Question

我正在使用PouchDB将远程数据库与本地数据库同步，下面的代码放置在componentDidMount

中

const that = this
var localDB = new PouchDB('localdb')
var remoteDB = new PouchDB('http://192.168.1.106:5984/remotedb')

localDB.sync(remoteDB, {
    live: true,
    retry: true
}).on('change', function (change) {
    console.log('test')
    that.setState({
      items: [this.state.items, ...change.change.docs]
    })
})

我不知道为什么它什么都不做

Answer 1

那里存在三个问题：

您在变更回调中使用了this而不是that。几乎可以肯定，它正在做一些事情：在控制台中写一个错误。（而不是that模式，只需使用箭头功能，就可以使用它。）
您正在打破React的基本规则之一：如果您要基于现有状态设置状态（您正在使用this.state.items作为新状态的一部分），您必须使用setState的回调版本（more here）。
几乎可以肯定，您想传播this.state.items而不是将该数组作为新数组中的第一个元素。（我不知道您是否也想传播change.change.docs。）

修复所有三个问题：

localDB.sync(remoteDB, {
    live: true,
    retry: true
}).on('change', change => {
    this.setState(({items}) => ({items: [...items, /*...*/change.change.docs]}));
})

（/*...*/是：如果您确实想传播...，请在此处使用change.change.docs，否则请删除。）

该函数使用箭头功能，因此您不需要that变量，并使用参数列表中带有destructuring的setState的回调版本来获取{{1} }状态的成员，并创建一个新的items成员，并附加items。

我们也可以在change.change.docs回调的参数列表中使用解构：

change

反应setState不适用于流数据吗？

1 个答案: