useState未按预期呈现

Question

我有一个名为chats的状态，在其中我存储来自firebase的所有消息，并试图在应用程序中呈现它。但它不会渲染这是我的组件状态：

const [chats, setChats] = useState([]);

我在UseEffect挂钩中带来消息，以便在运行应用时获得它

useEffect(() => {
let merged_uid = uid_merger(current_user.id, chat_user.uid);
database()
.ref('/')
.child(`chats/${merged_uid}`)
.on('child_added', (msgs) => {
console.log(msgs);
chats.push(msgs.val());
setChats(chats);
});
}, []);

但是id不呈现。

Answer 1

由于聊天是一种状态，您不能使用chats.push(msgs.val());对其进行更改，您需要做的是替换

chats.push(msgs.val());
setChats(chats);

带有

setChats([...chats, msgs.val()])