我在前端有点新，所以我有一个关于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, ... }) {
...
}
问题
key:values来自 API 端点的响应 json 对象几乎有 16 个以上。因此，如果我遵循上面的代码样式，那将是.. 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} = jsonright after:function CharacterPage({json})对于我想访问的每个键还是有更好的方法/代码实践来导入道具？
我的第一个想法是你可以修改 JSON 对象作为 getServerSideProps 的回报。识别此处使用的具有属性的对象类型会更清楚。
return { props: {
name: json.name,
id: json.id
...
}
}
如果您不能这样做，最好在最初进行解构。
let {id, name, ...etc} = json
但只解构你需要的元素。不需要解构所有元素。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句