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

Question

I'm using PouchDB to sync my remote db with my localdb, below code is placed in 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]
    })
})

I have no clue why it doesn't do anything at all

Answer 1

There are three problems there:

1. You've used this instead of that in the change callback. It's almost certainly doing something: Writing an error the console. (Rather than the that pattern, just use an arrow function so you can use this.)

2. You're breaking one of the fundamental rules of React: If you'e setting state based on existing state (which you are, you're using this.state.items as part of the new state), you must use the callback version of setState ( more here ).

3. You almost certainly wanted to spread this.state.items rather than including that array as your first element in the new array. (I don't know whether you also wanted to spread change.change.docs .)

Fixing all three:

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

(The /*...*/ is: Use ... there if you really want to spread change.change.docs , or remove it if you don't.)

That uses an arrow function so you don't need the that variable, and uses the callback version of setState with destructuring in the parameter list to grab the items state member and create a new items member with change.change.docs appended.

We could use destructuring in the parameter list of the change callback as well:

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