代码之家 › 专栏 › 技术社区 › Gazes

React:“.map不是函数”

react-hooks reactjs javascript

Gazes · 技术社区 · 1 年前

我正在使用JavaSpring作为后端构建我的第一个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试图在设置数据之前进行映射,所以我尝试将fetch请求放在async/await函数中,并在UseEffect块中调用它,但问题仍然存在。

2 回复 | 直到 1 年前

Arnaud Flaesch 1 年前

您的数据不是数组而是对象,因此使用map()是不起作用的。 map()是一个只存在于数组中的函数,就像filter()、reduce()、forEeach()等。这就是为什么会出现“不是函数”错误的原因。

您需要确保您的api发送一个数组,如下所示:

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

或者,如果你确信你总是只有一个对象,那么就做:

setFireTeam([data])

Shehan Lakshitha 1 年前

您给定的示例 console.log 不是数组。但是map函数用于数组操作。要解决此问题,您可以确保数据作为 fireteam 是一个数组。

以下代码将执行此操作。

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

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`http://localhost:8080/fireteam/id/${localStorage.getItem("fireteamId")}`);
      const data = await response.json();
      setFireTeam([data]);
    };

    fetchData();
  }, []);

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

export default FireTeam;

CodeBug 1 年前

如果您不想将数据类型更改为数组,可以执行以下操作

return (
    <div>
      <div>
        {Object.entries(fireteam).map(fteam =>
          <div key={fteam.id}>
            <p>{fteam.name}</p>
          </div>
         )}
    </div>
  </div>
)

你可以在这里阅读更多 works

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前