Javascript &引用；TypeError:Types.map不是函数；React.js

我试图从一个API获取数据，并将其作为“状态”返回到一个组件中，该组件是Navbar组件，但当我尝试在从API获取的数据中使用“映射”进行循环时，我得到以下错误

“TypeError:Types.map不是函数。”

我可以console.log以下数据，但无法在我的组件中显示这是我从浏览器控制台获得的数据：

 [["1", "Electronic"], ["2", "Clothes"], ["3", "Beauty"], ["4", "Phone Cases"]]

我的唯一组成部分是：

function getProductKinds(callBack) {
  var url = "http://localhost:8000/api/products";
  const responseType = 'json';
  const method = "GET";
  const xhr = new XMLHttpRequest();

  xhr.open(method, url);

  xhr.onload = () => {
    //console.log(xhr.response, xhr.status);
    callBack(xhr.response, xhr.status);
  };

  xhr.send();
}

function NavbarComponent(props) {
  const [kinds, setKinds] = useState([]);
  useEffect(() => {
    const myCallBack = (response, status) => {
      console.log("received data: ", response, status);
      if (status === 200) {
        setKinds(response);
        console.log("received data2: ", kinds, status);
      }
    };
    getProductKinds(myCallBack);
  }, []);
  return (
    <div>
      <Navbar color="light" light expand="md">
        <NavbarBrand href="/">BRAND</NavbarBrand>
        <Nav className="mx-auto " navbar>
        {kinds.map((kind) => {
            <NavItem>ss</NavItem>;
          })}
        </Nav>
        <NavbarText>Simple Text</NavbarText>
      </Navbar>
    </div>
  );
}

export default NavbarComponent;

函数getProductTypes（回调）{ 变量url=”http://localhost:8000/api/products"; const responseType='json'； const method=“GET”； const xhr=new XMLHttpRequest（）； open（方法，url）； xhr.onload=（）=>{ //日志（xhr.response，xhr.status）； 回调（xhr.response，xhr.status）； }; xhr.send（）； } 功能导航组件（道具）{ 常量[种类，集合种类]=useState（[]）； useffect（（）=>{ const myCallBack=（响应、状态）=>{ 日志（“收到的数据：”，响应，状态）； 如果（状态===200）{ 反应； 日志（“接收数据2:”，种类，状态）； } }; getProductKinds（myCallBack）； }, []); 返回( 烙印 {kinds.map（（kind）=>{ ss； })} 简单文本 ); } 导出默认导航组件； 功能应用程序的代码如下：

import './App.css';
import React from 'react';

import { useEffect } from 'react';
import NavbarComponent from './components/navbar';

function App() {

  return (
        <NavbarComponent></NavbarComponent>
  );
}

export default App;

import'/App.css'；
从“React”导入React；
从“react”导入{useffect}；
从“./components/navbar”导入NavbarComponent；
函数App（）{
返回(
);
}
导出默认应用程序；

---

首先尝试使用

JSON.parse（response）.map

将二维数组转换为对象数组，然后在map回调中返回

NavItem

：

setKinds(JSON.parse(response).map((curr)=>{
    return {id:curr[0],name:curr[1]}
}))

及

{kinds.map（（种类，索引）=>{
返回{kind.name}
}

当您从API获取数据时，需要一点时间。但是react不会等待该过程完成，并且在react渲染时，您的种类数组可能为空。您应该尝试此操作。 而不是

{kinds.map((kind) => {
  <NavItem>ss</NavItem>;
})}

{kinds.map（（kind）=>{
ss；
})}

试试这个

{kinds && kinds.map((kind) => {
  <NavItem>ss</NavItem>;
})}

{classes&&classes.map（（种类）=>{
ss；
})}

---

这应该有效

避免发布代码截图，请将您的代码发布到问题中：）看起来，

response

不是数组。response是数组。不，不起作用。可能是我的响应是sting而不是数组。也许我也应该发布我的django视图？你是否使用@Boussadjra BrahimOkay的2D数组转换函数，我得到了这个问题，就像我说的响应是字符串一样。所以我必须在中更改代码我的django视图。谢谢你的帮助。这是一个2d数组，我上面的建议应该行得通，我的好兄弟。就像我之前说的，我已经得到了解决方案，谢谢你的努力，但它不是数组。它是字符串，所以我不得不更改API以获得数组。我甚至可以给你发送一个typeof（响应）屏幕截图，所以你可以相信我，哈哈。上面的解决方案甚至都不起作用。

{kinds && kinds.map((kind) => {
  <NavItem>ss</NavItem>;
})}