React项目报Cannot read properties of undefined(reading 'setRestaurants')如何解决

核心报错原因 #

你在函数组件中错误使用this调用setRestaurants方法：
函数组件不存在类组件的实例this对象，你通过useState声明的setRestaurants是当前作用域下的普通常量，直接调用即可，不需要加this前缀。这也是你报错Cannot read properties of undefined (reading 'setRestaurants')的直接原因。

其他可优化问题 #

• async/await和.then混用，逻辑冗余写法不规范
• setRestaurants执行后立即打印restaurants无法拿到最新值，React的state更新是异步的，当前作用域下的变量还是更新前的旧值
• 异常捕获逻辑中throw err写在console.log(err)前面，会导致打印逻辑永远不会执行

修正后完整代码 #

const [restaurants, setRestaurants] = useState([
    {
        Restaurant_id: "R763567026",
        Restaurant_menuID: 0,
        Restaurant_name: "Boston Pizza",
        Restaurant_address: "271 Blackmarsh Rd",
        Restaurant_postal: "P1Z 7A5",
        Restaurant_username: "firstrest",
        Restaurant_orders: ["O415052628", "O321764897", "O252073901", "O724516036"],
        Restaurant_menuID: "M859068353",
        Restaurant_category: "Japanese",
        Restaurant_availability: true,
        Restaurant_openHour: "11h00",
        Restaurant_closeHour: "22h00",
    },
]);

useEffect(() => {
    const getList = async () => {
        await fetchList('R763567026');
    }
    getList();
}, [])

const fetchList = async (id) => {
    try {
        const resp = await fetch("/restaurant/id/" + id);
        const data = await resp.json();
        // 去掉this直接调用set方法
        setRestaurants(data);
        // 如果要验证更新后的值，可以直接打印接口返回的data，或者用useEffect监听restaurants变化
        console.log("接口返回的餐厅数据：", data);
    } catch (err) {
        console.log("请求出错：", err);
    }
    return true;
}

// 餐厅选中后的逻辑
const selectRestaurant = async (id) => {
    console.log(id);
};

return (
    <div>
        <Header />
        <RestaurantList
            itemList={restaurants}
            component={RestaurantCard}
            onSelect={selectRestaurant}
        >
            {" "}
        </RestaurantList>
    </div>
);
};

export default CustomerDash;

关键改动说明 #

• 删掉setRestaurants前面的this.前缀，直接调用方法更新state
• 统一用async/await写法处理异步请求，去掉冗余的.then链式调用
• 调整异常捕获逻辑，先打印错误再处理其他逻辑
• 调整打印逻辑，直接打印接口返回的data验证数据正确性

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