Question

我正在 React 中创建一个聊天应用程序。我正在使用 useEffect-hook 来更新消息（它真正做的就是从 JSON 服务器获取它们）。我希望每次房间里有人发送新消息时都会更新它们。

这是我的另一种选择：

useEffect(() => {
    fetch('http://localhost:8000/messages/')
    .then(res => {
        return res.json();
    })
    .then(data => {
        data = data.filter((msg) => msg.room === room);
        setData(data);
    })
    .catch(err => {
        console.error(`Error: ${err}`);
    })

    divRef.current.scrollIntoView({ behavior: 'smooth' });

}, []);

"data" 是一个消息列表。这会在您进入房间时显示所有消息，但在您传递新消息时不会加载。假设是因为最后是空列表。因此我尝试了这个：

在另一个组件中，我有一个变量“sent”，每次发送消息时都会设置为true，如下所示：

const onSubmit = (e) => {
    e.preventDefault();

    const data = {author: user, body: msg, room }
    setSent(true);

    fetch(`http://localhost:8000/messages/`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    })
    .then(response => {
        response.json();
        setSent(false);
    })
    .catch(err => console.error(`Error: ${err}`));

    setMsg('');
}

所以每次发送消息时，它都被设置为'true'，一旦成功发送，它就会被设置回'false'。然后我将它作为道具传递给我使用 useEffect 的组件：

<div className='chat-main'>
    <Messages user={user} room={room} sent={sent} />
</div>

然后我将“sent”变量放在 useEffect-hook 底部的列表中。这会为发送消息的用户更新消息，但不会为其他用户更新消息（因为，当然，“发送”仅在您发送消息时发生变化）

我可以在这里做什么？有办法吗？

如何在 React 中全局激活 useEffect？

0 个答案: