导入道具、解构赋值和未解析变量警告

Question

我对前端有点陌生，所以我对props导入的代码实践有疑问。

我正在使用next.js(它基于React(，我需要将props从API端点插入我的页面。

根据这个例子，它应该是这样的：

export async function getServerSideProps({query}) {
const res = await fetch(encodeURI(`url_here+${query}`));
const json = await res.json();

问题是«发生了什么»下一个：

如果我把我的道具(上面函数的结果(导出到这样的页面：

return { props: {
_id: json._id,
ilvl: json.ilvl,
...
checksum: json.checksum,

并像使用析构函数赋值作为参数函数一样导入它：

function CharacterPage({ _id, id, ... }) {
...
}

问题

来自API端点的响应json对象中几乎有16+key:values。所以，如果我遵循上面的代码样式，那将是.em。我想你已经理解了。

所以我可以从API端点导出结果，比如：

export async function getServerSideProps({query}) {
const res = await fetch(encodeURI(`url_here`));
const json = await res.json();
return {props: {json}
}

并导入它，作为页面的一个参数，如：

function CharacterPage({json})

但若我在页面上使用json.name对象键(用于条件呈现(，我的IDE(WebStrom(会向我显示未解析变量警告。

那么，我在哪里可以阅读正确的导入实践，并找到具有大量JSON键的react导入道具示例呢？

我应该使用：let {id, name, ...etc} = json紧接在：function CharacterPage({json})对于我想要访问的每个密钥，或者有更好的方法/代码练习来导入道具？

Answer 1

我的第一个想法是可以修改JSON对象以返回getServerSideProps。识别这里使用的具有属性的对象类型会更清楚。

return {  props: {
name: json.name,
id: json.id
...
}
}

如果不能做到这一点，那么最好先进行销毁。

let {id, name, ...etc} = json

但只破坏你需要的元素。没有必要破坏所有元素。