javascript - 导入 Prop 、解构赋值和 Unresolved 变量警告

Question

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

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

According to the example ，它应该看起来像这样:

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

问题在于接下来会发生什么:

如果我将我的 Prop (上面函数的结果)导出到这样的页面:

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

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

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

THE PROBLEM

来自 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 示例？

我应该使用:让 {id, name, ...etc} = json紧接着:函数CharacterPage({json})对于我想要访问的每个键，或者有更好的方法/代码实践来导入 Prop ？

Answer 1

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

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

如果你做不到这一点，最好先解构。

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

但仅解构您需要的元素。无需解构所有元素。