[React] map() vs forEach(): Array.prototype.map() expects a return value from arrow function.

2024. 6. 27. 19:05·💻 Study/웹
728x90

WARNING in [eslint]
src/components/views/MainPage/index.js
    Line 241:24: Array.prototype.map() expects a return value from arrow function.


The error you're seeing, Array.prototype.map() expects a return value from arrow function, occurs because the map function is used incorrectly. The map function expects a return value from the arrow function used within it. If you don't need to transform the array but just want to iterate over it, you should use forEach instead of map.

Here's how you can correct the code:

  1. Replace map with forEach to avoid the error.
  2. Ensure that you are returning a value if you decide to use map.

Here's the corrected version of your onClickTR function:

const onClickTR = (data) => {
  Axios.post(`${ADMIN_SERVER}/labelbyuserdate`, {
    user_id: data.user_id,
    date: data.date.replaceAll("-", "/"),
  }).then((res) => {
    if (res.status === 200) {
      // console.log(res.data.data);
      setSeries3([{ data: res.data.data }]);
    }
  });

  var newSeriesData = [];
  dataset.forEach((d) => {
    if (d.user_id === data.user_id && d.date === data.date) {
      newSeriesData.push({
        x: d.x.toString(),
        y: [
          new Date(`${d.date} ${d.start}`).getTime(),
          new Date(`${d.date} ${d.end}`).getTime(),
        ],
        label: d.label,
      });
    }
  });

  setSeries4([{ data: newSeriesData }]);
};

Explanation:

  1. Replaced map with forEach:
    • map is used for transforming each element of an array and returning a new array with the transformed elements.
    • forEach is used for iterating over each element of an array without returning a new array. Since you're not transforming the array but rather pushing elements into newSeriesData, forEach is appropriate here.
  2. Corrected the iteration:
    • The function now iterates over dataset with forEach, pushing the filtered and formatted data into newSeriesData.

This should resolve the error and ensure that the function behaves as expected.

728x90
저작자표시 (새창열림)

'💻 Study > 웹' 카테고리의 다른 글

Nginx - Streamlit 프록시 설정 방법  (0) 2024.08.30
[Node.js] MySQL2 모듈 장기간 연결 문제 해결  (0) 2024.07.02
[MySQL] java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver | MySQL JDBC Driver Not Found  (0) 2022.07.18
[netlify] Page Not Found Error (React Router)  (1) 2022.01.03
[Netlify] Treating warnings as errors because process.env.CI = true.  (0) 2022.01.03
'💻 Study/웹' 카테고리의 다른 글
  • Nginx - Streamlit 프록시 설정 방법
  • [Node.js] MySQL2 모듈 장기간 연결 문제 해결
  • [MySQL] java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver | MySQL JDBC Driver Not Found
  • [netlify] Page Not Found Error (React Router)
soyang.
soyang.
코딩 및 개발 일지를 기록합니다.
  • soyang.
    소소한 코딩일지
    soyang.
  • 전체
    오늘
    어제
  • 링크

    • Github 🐾
    • 포트폴리오 📓 (리뉴얼중)
    • LinkedIn 👩🏻‍💼
  • 공지사항

    • 소소한 코딩일지
  • 블로그 메뉴

    • 방명록
    • 분류 전체보기 (181)
      • 🚩 목표 & 회고 (9)
      • 📓 Papers (10)
      • 🧇 Algorithm (44)
        • 이론 (1)
        • LeetCode (2)
        • 프로그래머스 (30)
        • 백준 (11)
      • 💻 Study (47)
        • 🤖 AI 인공지능 (3)
        • Python 파이썬 (3)
        • Docker 도커 (4)
        • 웹 (20)
        • 안드로이드 (2)
        • JAVA 자바 (1)
        • Firebase (3)
        • Linux 리눅스 (10)
      • 🍪 Projects (2)
      • 🎒 학교 (44)
        • 대학원 도비 (2)
        • 21 동계 모각코: 슈붕팥붕 (13)
        • 21 하계 모각코: 와팬호 (13)
        • 20 동계 모각코: 와팬호 (13)
      • 활동들 (16)
        • 인프런 대학생 LEAF 2기 (9)
        • 2021 Silicon Valley Online .. (7)
  • 태그

    인프런대학생Leaf
    Linux
    리액트
    목표
    programmers
    백준
    error
    Ai
    Algorithm
    알고리즘
    프로그래머스
    Artificial Intelligence
    노마드코더
    모각코
    코딩테스트
    공부
    Gentoo
    Python
    알고리즘스터디
    React
  • 최근 댓글

  • hELLO· Designed By정상우.v4.10.3
soyang.
[React] map() vs forEach(): Array.prototype.map() expects a return value from arrow function.
상단으로

티스토리툴바