如何修复未定义的`无法序列化为JSON.请使用"null"或使用getStaticprops省略此值

Question

我正在尝试使用getStaticProps和next-js从api中获取一些数据。它返回错误undefinedcannot be serialized as JSON. Please usenull`或省略此值。

我已经根据网上提出的关于该主题的解决方案修改了代码，但都不起作用。

export async function getStaticProps() {
const propertyForSale = await fetchApi(`${baseUrl}/properties/list?locationExternalIDs=5002&purpose=for-sale&hitsPerPage=6`);

const propertyForRent = await fetchApi(`${baseUrl}/properties/list?locationExternalIDs=5002&purpose=for-rent&hitsPerPage=6`);
return {
props: {
// Initial code
propertyForSale: propertyForSale?.hits,
propertyForRent: propertyForRent?.hits,

// the below snippet fixes the issue but return null
// propertyForSale: propertyForSale?.hits ?? null,
//propertyForRent: propertyForRent?.hits ?? null,
//the below snippet fixes the issue but return Unexpected token u in JSON at position 0
// propertyForSale: JSON.stringify(JSON.parse(propertyForSale?.hits))
//propertyForRent: JSON.stringify(JSON.parse(propertyForRent?.hits)),
}
}
}

fetchapi.js

export const baseUrl = 'https://bayut.p.rapidapi.com'


export const fetchApi = async (url) => {  
const {result} = await axios.get((url), {
headers: {
'x-rapidapi-host': 'bayut.p.rapidapi.com',
'x-rapidapi-key': process.env.NEXT_PUBLIC_BAYU_API
},
});
console.log(result);
return result;
};

Answer 1

你能试试这个吗？

return {
props: {
propertyForSale: propertyForSale?.hits || null,
propertyForRent: propertyForRent?.hits || null,
}
}

Answer 2

正如Lazar在评论中指出的，在您的问题的代码片段中，您试图破坏一个不存在的属性。由于axios返回一个具有data属性的对象，因此您只需要销毁正确的属性：

const { data } = await axios.get(.....)

或。。。

const result = await axios.get(.....);
return result.data;

如果你坚持result的东西：D

Answer 3

为了修复错误，我将常量结果重命名为数据，如下所示。我不确定这个错误的原因是什么，如果有人想添加一些东西来解释为什么命名常量数据修复了这个错误，这是我的猜测。

export const fetchApi = async (url) => {  
const {data} = await axios.get((url), {
headers: {
'x-rapidapi-host': 'bayut.p.rapidapi.com',
'x-rapidapi-key': process.env.NEXT_PUBLIC_BAYU_API
},
});

return data;
};

export async function getStaticProps() {
const propertyForSale = await fetchApi(`${baseUrl}/properties/list?locationExternalIDs=5002&purpose=for-sale&hitsPerPage=6`);

const propertyForRent = await fetchApi(`${baseUrl}/properties/list?locationExternalIDs=5002&purpose=for-rent&hitsPerPage=6`);
return {
props: {
// Initial code
propertyForSale: propertyForSale?.hits,
propertyForRent: propertyForRent?.hits,

}
}
}