如何同时设置对象和数组为状态

Question

来自服务器的数据没有问题；

当代码激活时，我遇到问题

'arr[0] is not iterable'

。

这是对象数据

{a24cx1bs3yov2: {...},b64cx1bs3yo21: {...},c34cx1bs3yoh2: {...}}

这是数组数据

[0: {...}]

useEffect(() => {
    let arr = [];
    try{
      const getChats = async() => {
      const unsub = onSnapshot(doc(db, "userChats", currentUser.uid), (doc) => {
        if(doc.data()){
         // this one pushes object
          arr.push(doc.data());
        }
      });

      const fetch = onSnapshot(doc(db, "userGroups", currentUser.uid), (doc) => {
        if(doc.data()){
          // this one pushes array
          console.log(doc.data().groups);
        }
      });

      setChats([...arr[0],...arr[1])

      return () => {
        fetch()
        unsub();
      };
    };
    
    currentUser.uid && getChats();
  }catch(err){console.log(err);}
  }, [currentUser.uid]);

Answer 1

从您上面提到的，

doc.data()

中的

const unsub = onSnapshot

是一个

Object

。您无法将

Object

展开为

Array

。这个操作就是罪魁祸首：

setChats([...arr[0], ...arr[1]])

由于您已经在

Object

Array

中拥有了

arr

，并且您知道它们的索引，因此只需提取它们并将它们放入将设置为新状态的

Array

中即可。 您不需要进行点差操作。

setChats(arr.slice(0, 2))