console.log 后 reactjs 设置挂钩方法不起作用

Question

我想通过 useEffect 使用完整“菜单”数据项设置 filtredMenu，但是当我 console.log 它时，它给出 null。当我执行 console.log(menu) 时，它没有问题，我在控制台中看到了所有菜单项。稍后我将按类别按钮过滤 filtredMenu。我做错了什么？

这是我的文档：

import { useContext, useEffect, useState } from "react";
import MenuContext from "../context/MenuContext";


function Menu() {

    const { menu, setMenu } = useContext(MenuContext);
    const [filtredMenu, setFiltredMenu] = useState(null);

    useEffect(() => {
        setFiltredMenu(menu);
        console.log(filtredMenu)
    }, []);

    function handleMenu(e) {
        e.target.value !== "all"
            ? setFiltredMenu(menu.filter(item => item.category === e.target.value))
            : setFiltredMenu(menu);
    }

    return (

        <>
            {/* {filtredMenu.map((item) => (
                    <>
                        <button key={item.id} value={item.category} onClick={handleMenu}>
                            {item.category}
                        </button>
                    </>
                ))} */}

            {menu.map((item) =>
                <div key={item.id}>
                    <div>
                        {item.title}
                    </div>
                    <div>
                        {item.category}
                    </div>
                    <div>
                        {item.price}
                    </div>
                    <div>
                        {item.desc}
                    </div>
                    <img src={item.src} alt="image" />
                </div>
            )}
        </>

    )
}

export default Menu

谢谢。

Answer 1

这是因为 React 的 setState 函数是 async，您不会立即看到状态变化。如果您稍等片刻，您会看到值发生变化。

console.log 后 reactjs 设置挂钩方法不起作用

reactjs set hook method is not working after console.log

javascript

reactjs

react-hooks