反应：“.map 不是函数”

Question

我正在使用 Java Spring 作为后端构建我的第一个 React 应用程序。我在尝试从 API 获取数据并将其映射到 js 时遇到问题。它给了我错误

fireteam.map is not a function

。这是问题代码：

import React, { useEffect, useState } from "react";

const FireTeam = () =>{
  const [fireteam, setFireTeam] = useState([]);

  useEffect(() => {
    fetch(`http://localhost:8080/fireteam/id/${localStorage.getItem("fireteamId")}`)
      .then(response => response.json())
      .then(data => {setFireTeam(data)})
  });

  return (
    <div>
      <div>
        {fireteam.map(fteam =>
          <div key={fteam.id}>
            <p>{fteam.name}</p>
          </div>
        )}
      </div>
    </div>
  )
}
export default FireTeam

在获取请求末尾使用

console.log

检查数据给了我正确的数据：

{id: 3, name: 'Intercessors', description: 'fdgdfsggfsd', killTeamId: 1}

所以这不是我如何构建获取请求的问题。我认为这可能归结为

fetch()

和在设置数据之前尝试映射的 Javascript 之间的计时问题，因此我尝试将获取请求放入 async/await 函数中并在 UseEffect 块中调用它，但问题仍然存在.

Answer 1

您的数据不是数组而是对象，因此使用 map() 不起作用。 您需要确保 api 发送一个数组，如下所示：

[{id: 3, name: 'Intercessors', description: 'fdgdfsggfsd', killTeamId: 1}]

或者，如果您确定自己永远只有一个对象，请执行以下操作：

setFireTeam([data])