我尝试运行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));
}, [])
我不知道为什么。请帮帮我。
1条答案
按热度按时间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