对象不能作为使用钩子的 React 子项(找到:带有键 {_links} 的对象)

Question

我正在尝试用反应和弹簧引导构建一个简单的示例。但是我无法让反应部分来呈现响应。

我从弹簧启动应用程序中得到了这个：

{_links: {…}}
_links:
articles: {href: "http://localhost:8080/api/articles"}
profile: {href: "http://localhost:8080/api/profile"}

使用此代码，我将收到以下错误：

Objects are not valid as a React child (found: object with keys {_links}) using hooks
import React from "react";
import useFetch from "./useFetch";
export default function DataLoader(props) {
const data = useFetch("/api");
return (
<div>
<h1>Testing</h1>
<ul>
{data}
</ul>
</div>
);
}

调整该错误的代码以循环数组会给出另一个错误。

Unhandled Rejection (TypeError): data.map is not a function
import React from "react";
import useFetch from "./useFetch";
export default function DataLoader(props) {
const data = useFetch("/api");
return (
<div>
<h1>Testing</h1>
<ul>
{data.map(data => <div>{data.keys}</div>)}
</ul>
</div>
);
}

Answer 1

data返回是一个Object

如果只想循环访问所需的键：

import React from "react";
import useFetch from "./useFetch";
export default function DataLoader(props) {
const data = useFetch("/api");
return (
<div>
<h1>Testing</h1>
<ul>
{Object.keys(data).map(key => <div>{key}</div>)}
</ul>
</div>
);
}

请注意要映射的Object.keys，而不是data

Answer 2

data

是一个对象，.map是一个数组函数。

给定您共享的结构，您可能需要以某种方式使用Object.keys给定对象返回一个数组的数组，该数组以对象的键作为成员：

import React from "react";
import useFetch from "./useFetch";
export default function DataLoader(props) {
const data = useFetch("/api");
return (
<div>
<h1>Testing</h1>
<ul>
{Object.keys(data._links).map(key => <a {...data._links[key]}>{key}</a>)}
</ul>
</div>
);
}

这将要做的是遍历_links中的所有条目，并使用_links[key]内容给出的 props 创建一个锚点(例如，如果键articles它将是data._links.articles下的所有条目(，{...data._links[key]}只是意味着扩展对象作为锚点的道具。

鉴于您的数据，这应该会产生如下链接：

<a href="http://localhost:8080/api/articles">articles</a>