使用 useState 反应钩子 [英] React hooks with useState

查看:50
本文介绍了使用 useState 反应钩子的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下代码:

export default function App() {
    const [lastMessageId, setLastMessageId] = useState(0);
    const [messages, setMessages] = useState([]);

    const addMessage = (body, type) => {
        const newMessage = {
            id: lastMessageId + 1,
            type: type,
            body: body,
        };
        setLastMessageId(newMessage.id)
        setMessages([...messages, newMessage]);
        console.log("point 1", messages);
        return newMessage.id;
    }

    // remove a message with id
    const removeMessage = (id) => {
        const filter = messages.filter(m => m.id !== id);
        console.log("point 2", filter);
        setMessages(filter);
    }

    // add a new message and then remove it after some seconds
    const addMessageWithTimer = (body, type="is-primary", seconds=5) => {
        const id = addMessage(body, type);
        setTimeout(() => removeMessage(id), seconds*1000);
    };

    return (
        ...
    );
}

我想知道为什么在第 1 点设置消息后,当我执行控制台日志时,它似乎没有更新.当我调用 addMessageWithTimer 时,这变成了一种奇怪的行为,因为当它调用 removeMessage 时,它​​不会正确删除我期望的消息.

I would like to know why after I setMessages at point 1, when I do console log it doesn't appear to be updated. This turns into a weird behaviour when I call addMessageWithTimer because when it calls removeMessage then it doesn't remove correctly the messages that I expect.

你能解释一下怎么做吗?

Could you please explain me how to do it?

推荐答案

@Retsam 的回答非常有用,因为我能够理解问题并找到合适的解决方案.

@Retsam was very useful with his answer as I was able to understand the problem and find a proper solution.

这是我找到的解决方案:

here is the solution that I've found:

export default function App() {
    const [lastMessageId, setLastMessageId] = useState(0);
    const [messages, setMessages] = useState([]);

    const addMessage = (body, type="is-primary") => {
        const newMessage = {
            id: lastMessageId + 1,
            type: type,
            body: body
        };
        setLastMessageId(newMessage.id)
        setMessages([...messages, newMessage]);
        return newMessage.id;
    }

    // delete messages after 5 seconds
    useEffect(() => {
        if (!messages.length) return;
        const timer = setTimeout(() => {
            const remainingMessages = [...messages];
            remainingMessages.shift();
            setMessages(remainingMessages);
        }, 5*1000);
        return () => clearTimeout(timer);
    }, [messages]);

    return (
         ...
    );
}

这篇关于使用 useState 反应钩子的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆