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

Question

我在前端有点新，所以我有一个关于 props 导入的代码实践的问题。

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

According to the example，应该是这样的：

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,

并像使用 destructuring assignment 作为参数函数一样导入它：

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-import props 示例？

我应该使用： 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

但只解构你需要的元素。无需解构所有元素。