Question

17/01/2021 更新

我问了一个问题 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        |
+-------------------+-----------------------+

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

** 更新 **

为免生疑问，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);
  }
}

有关信息，我还在原始问题中尝试了使用 thos 类 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]);

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

1 个答案: