导入道具、解构分配和未解决的变量警告

Question

我在前端有点新，所以我对使用 props 导入的代码实践有疑问。

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

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, ... }) {
    ...
}

THE PROBLEM

几乎有 16+ key:values 个来自 API 端点的响应 json 对象。因此，如果我遵循上面的代码风格，那将是.. 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) 会向我显示 unresolved variable 警告。

那么我在哪里可以阅读正确的导入实践并找到包含来自 JSON 的大量键的 react-import props 示例？

我应该使用： let {id, name, ...etc} = json 紧随其后： function CharacterPage({json}) 对于我想要访问的每个密钥，或者有更好的 way/code 导入道具的做法？

Answer 1

我的第一个想法是您可以修改 getServerSideProps 的 return 中的 JSON 对象。这里使用的是哪种属性的对象，这样会更清楚。

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

如果做不到，最好先解构。

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

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

导入道具、解构分配和未解决的变量警告

import props, destructuring assignment & unresolved variable warning

javascript

reactjs

next.js