javascript - "TypeError: kinds.map is not a function."React.js

Question

我正在尝试从 API 获取数据并将其作为导航栏组件内的“状态”返回，但是当我尝试在从 API 获取的数据中循环时，使用“ map ”出现以下错误

"TypeError: kinds.map is not a function."

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

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

Answer 1

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

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

和

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

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