react js - announcements.map is not a function-CodePudding

I don't know, what I did wrong here I always use map like that how can i fix this problem I need to take for example 5 last announcements from the api how can i do that too please help me I'm so confused

JSON file is:

{
    "announcements": [
        {
            "id": 647,
            "title": "لیست اساتید راهنمای دانشجویان گروه عمران",
            "content": "لیست اساتید راهنمای دانشجویان گروه عمران دانشگاه خیام (17/07/1400)<br />\r\n<br />\r\n\t\t\t<br />\r\nکارشناسی عمران ورودی 1400\t\tدکتر کیوان بینا<br />\r\nکارشناسی عمران ورودی 99\t\tدکتر آرمین جراحی<br />\r\nکارشناسی عمران ورودی 98\t\tدکتر مرتضی شیخی<br />\r\nکارشناسی عمران ورودی 97 و ماقبل\tدکتر امیرحسین کیوانی<br />\r\nکارشناسی نقشه برداری\tهمه ورودی ها\tدکتر کیوان بینا<br />\r\nکارشناسی ارشد سازه\tهمه ورودی ها\tدکتر مرتضی شیخی<br />\r\nکارشناسی ارشد سازه های هیدرولیکی\tهمه ورودی ها\tدکتر کیوان بینا<br />\r\nکارشناسی ارشد راه و ترابری\tهمه ورودی ها\tدکتر آرمین جراحی<br />\r\nکارشناسی ارشد مهندسی سوانح طبیعی\tهمه ورودی ها\tدکتر کیوان بینا<br />\r\n <br />\r\nدانشجویان محترم به منظور دریافت راهنمایی جهت انتخاب واحد درسی، حذف یا اضافه پیش از شروع ترم و در زمان انتخاب واحد، با در دست داشتن چارت درسی مربوطه به استاد راهنمای آموزشی خود مراجعه نمایند.<br />\r\n",
            "isImportant": false
        },
        {
            "id": 675,
            "title": "تشکر ریاست محترم دانشگاه از کارمندان جهت پایان پذیرفتن امتحانات پایان ترم نیمسال اول",
            "content": "<div style=\"text-align: justify;\"><span style=\"font-size: 12px;\">تشکر ریاست محترم دانشگاه از کارمندان جهت پایان پذیرفتن امتحانات پایان ترم نیمسال اول</span><br></div>",
            "isImportant": false
        }
    ],
    "pagination": {
        "total": 212,
        "lastPage": 106,
        "perPage": 2,
        "currentPage": 106,
        "from": 210,
        "to": 212
    }
}

component event code:

import React, { useState, useEffect } from 'react'

function Events() {
    const [announcements, fetchannouncements] = useState([]);
    const getData = () => {
        fetch('https://api.example.com')
          .then((res) => res.json())
          .then((res) => {
            console.log(res)
            fetchannouncements(res)
          })
      }
      useEffect(() => {
        getData()
      }, [])
    return (
        <section id="events">
    <div className="container-fluid">
      <div className="events-title justify-content-center align-items-center">
        <h1>رویداد ها</h1>
        <svg xmlns="http://www.w3.org/2000/svg" width="3" height="84" viewBox="0 0 3 84">
          <line id="Line_32" data-name="Line 32" y2="84" transform="translate(1.5)" fill="none" stroke="#212121" strokeWidth="3"/>
        </svg>        
        <h1>اطلاعیه ها</h1>
      </div>
      <div className="d-none d-md-block">
        <div className="events row">
          <a href="#">آرشیو کامل اطلاعیه ها</a>
          {announcements.map((info) =>  {
              return (
                <div key = {info.id} className="events-items col-12 col-xxl-3 col-md-6 col-sm-12">
                <div className="primary-texts">
                  <p className="primary-text">
                     {info.title}
                  </p>
                </div>
                <br/>
                <div className="dates">
                  <span className="date">
                    <p className="number">
                      05
                    </p>
                    بهمن / فرهنگی 
                  </span>
                </div>
              </div>
              );
            })}

        </div>
        <div className="announcements row">
  
        </div>
      </div>
      <div id="carouseleventsControls" className="carousel slide d-md-none" data-ride="carousel">
        <div className="carousel-inner">
          <div className="carousel-item active">
            <div className="events-items col-12 col-xxl-3 col-md-6 col-sm-12">
              <div className="primary-texts">
                <p className="primary-text">
                  برگزاري آزمون آزمايشي
                </p>
              </div>
              <br/>
              <div className="dates">
                <span className="date">
                  <p className="number">
                    05
                  </p>
                  بهمن / فرهنگی 
                </span>
              </div>
            </div>
          </div>
          <div className="carousel-item">
            <div className="events-items col-12 col-xxl-3 col-md-6 col-sm-12">
              <div className="primary-texts">
                <p className="primary-text">
                  نخسین جایزه جوان نوآور ماندگار
                </p>
              </div>
              <br/>
              <div className="dates">
                <span className="date">
                  <p className="number">
                    05
                  </p>
                  بهمن / فرهنگی 
                </span>
              </div>
            </div>
          </div>
          <div className="carousel-item">
            <div className="events-items col-12 col-xxl-3 col-md-6 col-sm-12">
              <div className="primary-texts">
                <p className="primary-text">
                  اولین سالگرد سردار دلها
                </p>
              </div>
              <br/>
              <div className="dates">
                <span className="date">
                  <p className="number">
                    05
                  </p>
                  بهمن / فرهنگی 
                </span>
              </div>
            </div>
          </div>
          <div className="carousel-item">
            <div className="events-items col-12 col-xxl-3 col-md-6 col-sm-12">
              <div className="primary-texts">
                <p className="primary-text">
                  امتحانات پایان ترم اول 
                  سال تحصیلی ۱۴۰۰-۱۳۹۹
                </p>
              </div>
              <br/>
              <div className="dates">
                <span className="date">
                  <p className="number">
                    05
                  </p>
                  بهمن / فرهنگی 
                </span>
              </div>
            </div>
          </div>
        </div>
        <button className="carousel-control-prev" type="button" data-bs-target="#carouseleventsControls" data-bs-slide="prev">
          <span className="carousel-control-prev-icon" aria-hidden="true"></span>
          <span className="visually-hidden">قبلی</span>
        </button>
        <button className="carousel-control-next" type="button" data-bs-target="#carouseleventsControls" data-bs-slide="next">
          <span className="carousel-control-next-icon" aria-hidden="true"></span>
          <span className="visually-hidden">بعدی</span>
        </button>
      </div>
    </div>
  </section>
    );
  }
  
  export default Events;

console gives me the result of JSON file but react got an error that tells me .map is not a function.

CodePudding user response：

This error is coming because announcements is not an array.

Try replacing your getData function with this,

const getData = () => {
    fetch('https://api.example.com')
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        fetchannouncements(res?.announcements);
      });
  };

CodePudding user response：

You can't use map on Object {}. You need to set res.announcements instead of res in fetchannouncements function.

 const getData = () => {
  fetch('https://api.example.com')
    .then((res) => res.json())
    .then((res) => {
      console.log(res.announcements)
      fetchannouncements(res.announcements)
    })
}