json UseEffect钩子未运行

wwwo4jvm  于 2023-04-08  发布在  其他
关注(0)|答案(1)|浏览(128)

我尝试运行useEffect钩子从json文件中获取数据。然而,useEffect没有运行,因此屏幕显示为空白。这是我尝试获取数据并更新状态的代码部分。

const RestaurantLayout = ({ children: Component, ...props }) => {
    const [restaurant, setRestaurant] = useState([])

    useEffect(() => {
        console.log("useEffect called");
        fetch('/restaurantData.json')
        .then(response => {
            console.log(response)
            return response.json();})
        .then((resData) => {
            setRestaurant(resData);
        })
        .catch(error => console.error(error));
    }, [])

json文件在public文件夹中。
然而,当我找到解决这个问题的方法时,我从json文件中复制了json数据,并手动将其放入useState中,然后useEffect确实运行了。这是代码:

const RestaurantLayout = ({ children: Component, ...props }) => {
    const [restaurant, setRestaurant] = useState([
        {
            _id: "1",
            isPro: true,
            isOff: false,
            name: "Nathu's Sweets",
            address: "Ashok Vihar, New Delhi",
            restaurantRating: "3.7",
            cuisine: [
                "North Indian",
                "Sweets",
                "South Indian",
                "Chinese",
                "Street Food",
                "Fast Food",
                "Desserts"
            ],
        costForOne: "350",
        images: [
                {
                    "location":
                        "/tiffin3.jpg"
                },
                {
                    "location":
                        "/foodimg1.jpg"
                },
                {
                    "location":
                        "/foodimg2.jpg"
                },
                
                {
                    "location":
                        "/foodimg3.jpg"
                }
            ]
        },
])

useEffect(() => {
        console.log("useEffect called");
        fetch('/restaurantData.json')
        .then(response => {
            console.log(response)
            return response.json();})
        .then((resData) => {
            setRestaurant(resData);
        })
        .catch(error => console.error(error));
    }, [])

我不知道为什么。请帮帮我。

7kqas0il

7kqas0il1#

你真的只能获取一个API端点。你的路径/restaurantData.json不能解析到这样的端点。
你必须创建一个API或者硬编码你的json数据,就像你在第二个代码示例中所做的那样。
首选的方法是创建一个API。您可以使用类似**express.js(仅API)或类似next.js**的React Framework,它也支持创建Restful API。
下面是一个next.js API端点的例子,其中json数据正在发送:
https://nextjs.org/docs/api-routes/introduction

相关问题