Question

我正在尝试使用react和spring boot构建一个简单的示例。但是我无法获得反应部分来呈现响应。

我是从Spring Boot应用程序中得到的：

{_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>

使用钩子的对象作为React子对象无效（找到：带有键{_links}的对象）

2 个答案: