Блог

Я пытаюсь сопоставить данные api в reactjs, но когда я пытаюсь сопоставить данные, это выдает ошибку, что map не является функцией, пожалуйста, помогите мне, я не понимаю, почему он продолжает говорить мне, что это не функция, пожалуйста, поправьте меня, я новичок в reactjs.

Ошибка типа: onlineUrs.map не является функцией

 import React , { useEffect, useState }  from 'react'
import axios from "./axios.js"
import Header from "../dashbroad/Header.js";
import Sidebar from "../dashbroad/Sidebar.js";


function Online() {
  const [onlineUrs , setOnlineUrs] = useState([]);
  
  const config = {
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        Authorization : 'Bearer '    localStorage.getItem('token'),
    },
};

useEffect(() =>{
  axios.get("http://localhost:8001/api/v1/active", config).then((response) => {
    setOnlineUrs(response.data);  

  });
});
 
console.log(onlineUrs)


  return (
    <div className="app">
      <Header/>
      <div className="app_body">

        <Sidebar />

        <div className="row_posters">
    {
      onlineUrs.map((item, index ) =>(
        <h1>{item.result}</h1>

      ))

    }
    
    </div>


</div>
  
</div>

      </div>
    </div>
  );
}

export default Online
 

map() может использоваться только для массивов. В этой ситуации похоже, что onlineUrs не является массивом или еще не задан.

Вы могли бы разместить что-то подобное перед вызовом функции map():

 
onlineUrs amp;amp; Array.isArray(onlineUrs) amp;amp; onlineUrs.map((item, index) =>{
        <h1>{item.result}</h1>
      )}
 

Если ваш ответ api не является массивом, ничего не будет отображаться и не нарушит ваш код