reactjs 에서 axios 데이터 로딩시 more 버튼처리

Reactjs 에서 axios로 데이터 로딩시 more 버튼을 눌렀을시에 ~ 아래로 10개 더 로딩 하면서 계속 붙는 호출 하는 예제이다.

import React, { useState, useEffect } from "react";
import axios from "axios";

const App = () => {
  const [data, setData] = useState([]);
  const [offset, setOffset] = useState(0);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      const res = await axios.get(`https://my-api.com/data?offset=${offset}&limit=10`);
      setData(prevData => [...prevData, ...res.data]);
      setLoading(false);
    };
    fetchData();
  }, [offset]);

  const handleLoadMore = () => {
    setOffset(prevOffset => prevOffset + 10);
  };

  return (
    <div>
      <h1>Data</h1>
      {data.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
      {loading && <div>Loading...</div>}
      {!loading && data.length > 0 && (
        <button onClick={handleLoadMore}>Load More</button>
      )}
    </div>
  );
};

export default App;

문제는 Uncaught TypeError: Cannot read properties of undefined (reading ‘data’) 오류가 나왔다.

그래서 ~ axios 쪽에서 오류 처리를 해주면서 데이터 값 setData를 안쪽으로 넣어주니 해결이 되었다.

import React, { useState, useEffect } from "react";
import axios from "axios";

const App = () => {
  const [data, setData] = useState([]);
  const [offset, setOffset] = useState(0);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      const res = await axios
                 .get(`https://my-api.com/data?offset=${offset}&limit=10`);
                 .then((response) => {
                    const { rows } = response.data;
                    console.log(rows);
                    setData((prevData) => [...prevData, ...rows]);
                })
                .catch((error) => {
                    console.error(error);
                });
      setLoading(false);
    };
    fetchData();
  }, [offset]);

  const handleLoadMore = () => {
    setOffset(prevOffset => prevOffset + 10);
  };

  return (
    <div>
      <h1>Data</h1>
      {data.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
      {loading && <div>Loading...</div>}
      {!loading && data.length > 0 && (
        <button onClick={handleLoadMore}>Load More</button>
      )}
    </div>
  );
};

export default App;