反应状态更新组件，但不是状态

Question

2021 年 17 月 1 日更新

我问了一个问题here 并从@TaghiKhavari 那里得到了一个完美的答案，我正在使用它并且可以很好地向数组中添加一个项目并消除陈旧状态问题。

但是，我对我认为是竞争条件的情况有进一步的问题，但我不确定现在是否进行了进一步的调试，也不知道如何修复它。我已经尝试从我正在使用的基于类的模型转移到一个简单的对象数组，但这并没有什么不同。

这是我在 useEffect 中的代码：

useEffect(() => {
    if (connection) {
        connection.start()
            .then(result => {
                console.log('Connected!');
                ...

                connection.on('ConnectedToRoom', (id, name) => {
                    const newPerson = new PersonModel ({
                        id: sid,
                        firstName: name,
                        present: true
                    })
                    
                    const pd = people.models
                    pd.push(newPerson)                   
                    // following works just fine except after ReceiveDisconnected call, the array has not been changed so there are two extra added to UI
                    setPeople(() => new PersonList(sd));  
                });

                connection.on('ReceiveDisconnected', id => {
                    const pd = people.Remove(id)  //removes the person with id          
                    setPeople(() => new PersonList(pd)); // after the line, UI updated to show 1 less person
                });
            })
            .catch(e => console.log('Connection failed: ', e));
    }
}, [connection]);

所以我添加了 1 个人，并且 UI 更新以显示该人。我添加了第二个人，状态更新，UI 更新。

当用户断开连接时，将调用 ReceiveDisconnected 并且 UI 更新为仅显示 1 个人（如预期的那样），似乎表明人员状态已更新。

但是当一个新用户连接时，状态仍然有 2 个项目，并且添加了新人，因此 UI 显示原来的 2 个人 + 第三个人。

这是问题的图解

+-------------------+-----------------------+
|     action        |            UI         |
+-------------------+-----------------------+
| user1 connects    |       Person 1        | correct
+-------------------+-----------------------+
| user2 connects    |       Person 1        | correct
|                   |       Person 2        |
+-------------------+-----------------------+
| user2 disconnects |       Person 1        | correct
+-------------------+-----------------------+
| user3 connects    |       Person 1        | incorrect
|                   |       Person 2        |
|                   |       Person 3        |
+-------------------+-----------------------+

我尝试将 setTimeout 添加到 ConnectToRoom 中的 SetPeople 调用中，以查看这是否有助于调试，但没有任何区别。

** 更新 **

为免生疑问，PersonList 是一个具有内部模型数组的类：

  import defaultsDeep from "lodash/defaultsDeep";
  // https://opensource.com/article/20/5/data-modeling-javascript
  export class Model {
      constructor(attributes = {}) {
        defaultsDeep(this, attributes, this.defaults);
      }
  }

  export class List {
      constructor(items = []) {
        this.models = items.map(item => new this.model(item));
      }
  }

  export class PersonList extends List {
  get model() {
    return PersonModel;
  }



  findByFirstName(val) {
    return this.models.find(item => item.firstName === val);
  }

  Remove(id) {
    return this.models.filter(item => item.id !== id);
  }
}

对于信息，我还尝试了使用类 List 的原始问题中的 useRef 技巧，它工作正常，所以我相信这是一个陈旧的状态问题

Answer 1

您仍在使用状态，但未将其添加到 useEffect 依赖项或未使用 setState callback :)。

useEffect(() => {
  if (connection) {
    // ...
    connection.on("ConnectedToRoom", (id, name) => {
      const newPerson = new PersonModel({
        id: sid,
        firstName: name,
        present: true,
      });

      //const pd = people.models;
      //pd.push(newPerson);
      setPeople((peopleValue) => {
        // do whatever changes you need to make and then return the new state
        // I don't know what your state looks like but in most cases you can 
        // make a copy of the state, by simply destructuring it like this
        return [...peopleValue, newPerson];
      });
    });

    connection.on("ReceiveDisconnected", (id) => {
      setPeople((peopleValue) => {
        //again I don't know what people looks like 
        //but if it's an array which each item have a unique id you can do the following
        return peopleValue.filter(p => p.id !== id)
      });
    });
    //...
  }
}, [connection]);