React类组件转函数组件（React Hooks）后网页不更新问题求助

你的函数式组件存在两个关键错误，导致页面无法更新：

1. dishes状态初始化错误
   原类组件中dishes直接赋值为DISHES数组，但转换后你写成了const [dishes] = useState({ DISHES });，这会让dishes变成一个包含DISHES属性的对象，而非原数组。后续filter操作会因对象无该方法或匹配失败，导致Dishdetail无法获取正确数据。

2. selectedDish状态更新错误
   selectedDish是单一值类型（数字/ null），但你用对象展开的方式更新状态，导致selectedDish变成{ selectedDish: dishId }这样的对象。后续dish.id === selectedDish的比较永远不成立，页面自然不会更新。

修正后的函数式组件代码 #

import React, { useState } from "react";
import { Navbar, NavbarBrand } from "reactstrap";
import Menu from "./Menu";
import Dishdetail from "./Dishdetail";
import { DISHES } from "../shared/dishes";

function Main() {
    // 直接将DISHES数组作为初始值
    const [dishes] = useState(DISHES);
    // 保持selectedDish为单一值类型
    const [selectedDish, setSelectedDish] = useState(null);

    function onDishSelect(dishId) {
        // 直接更新为传入的dishId即可
        setSelectedDish(dishId);
    }

    return (
        <div>
            <Navbar dark color="primary">
                <NavbarBrand href="./" className="mx-5">
                    Ristorante De Confusion
                </NavbarBrand>
            </Navbar>
            <Menu dishes={dishes} onClick={(dishId) => onDishSelect(dishId)} />
            <Dishdetail dish={dishes.filter((dish) => dish.id === selectedDish)[0]} />
        </div>
    );
}

export default Main;

内容的提问来源于stack exchange，提问作者Prince Singh