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

Question

我正在尝试从 API 和 return 中获取数据作为 'state' 组件内的 Navbar 组件，但是当我尝试在数据内循环时，我从 API 获取，使用 'map' 我得到以下错误

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

我可以 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;

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 将二维数组转换为对象数组，然后 return 地图回调中的 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>
}

Answer 2

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

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

试试这个..

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

这应该有效

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

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

javascript

reactjs

react-component

react-hooks