“TypeError：kinds.map 不是函数。”反应.js答案

【问题标题】："TypeError: kinds.map is not a function." React.js“TypeError：kinds.map 不是函数。”反应.js
【发布时间】：2021-03-17 07:21:19
【问题描述】：

我正在尝试从 API 获取数据并将其作为组件内的“状态”返回，该组件是导航栏组件，但是当我尝试在从 API 获取的数据中循环时，使用“地图”我得到一个跟随错误

"TypeError: kind.map 不是函数。"

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

 [["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;

功能App如下代码：

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

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

function App() {

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

export default App;

【问题讨论】：

避免发布代码截图，请将您的代码发布到问题中:)
看起来response 不是一个数组。
响应是数组。

标签： javascript reactjs react-hooks react-component

【解决方案1】：

首先尝试使用JSON.parse(response).map 将该二维数组转换为对象数组，然后在地图回调中返回NavItem：

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

和

{kinds.map((kind,index)=>{

   return <NavItem key={index}>{kind.name}</NavItem>
}

【讨论】：

好的，我明白了，问题就像我说响应是一个字符串。所以我不得不更改我的 django-views 中的代码。感谢您的帮助。
这是一个二维数组，我上面的建议应该可行
我的好兄弟。就像我之前说的那样，我已经得到了解决方案并感谢您的努力，但它不是一个数组。它是字符串，所以我不得不更改我的 API 以获取数组。我什至可以给你发一个 typeof(response) 截图，这样你就可以相信我了，哈哈。上面的解决方案甚至都不起作用。

【解决方案2】：

当您从 API 获取数据时，需要一点时间。但是 react 不会等待该过程完成，并且当 react 渲染时，您的 kind 数组可能是空的。你应该试试这个。而不是

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

试试这个..

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

这应该可以工作

【讨论】：

没有没有用。可能我的回复是一个刺痛而不是数组，也许我也应该发布我的 django-views 吗？
你用过@Boussadjra Brahim 的二维数组转换功能吗