为什么我的 object 在更新对象的 state 后不会重新渲染？

Question

I'm trying to iterate through my json to create an infinite scroll. On load, I'm showing the first 2 records. When someone scrolls to the bottom of the page I'm trying to update my object to show current 2 records and append next 2 records to the object.

I've tried updating the object's state by merging the current object and a new object with the next two records but I keep getting "TypeError: newData.map is not a function"

function Cards() {

  const [roomsData, setroomsData] = useState([]);
  const [prevData, setprevData] = useState([]);
  const [newData, setnewData] = useState([]);
  const [nextData, setnextData] = useState([]);
  const [startIndex, setstartIndex] = useState(0);
  const [lastIndex, setlastIndex] = useState(2);

useEffect(() => {
     axios.get(`/data/rooms.json`)
       .then(res => {
         const roomDataRes = res.data;
         setroomsData(roomDataRes);
         setprevData(roomDataRes.slice(startIndex,lastIndex));
         setnewData(roomDataRes.slice(startIndex,lastIndex));
    })
  }, []);

//detect end of page scroll
  useEffect(() => {
      window.addEventListener('scroll', handleScroll);
      return () => window.removeEventListener('scroll', handleScroll);
    }, []);

  //what happens after end of page scroll
  function handleScroll() {
    if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight) return;
    setnextData(newData.slice(2,4));
    setnewData({...prevData,...nextData});
  }

    const cards = newData.map((item,index) =>
      <Card key={index} 
        id={item.id} 
        roomname={item.roomname} 
        location={item.location} 
        zipcode={item.zipcode} 
        images={[item.images]} 
        profile={item.profile} 
        price={item.price} 
        bullets={[item.bullets]} 
        />
      );

  return (
      <div className="cardcontainer">
        {cards}
      </div>
  );
}

export default Cards;

When you scroll to the bottom of the page I'm expecting the cards to update to show the current records and also the next two records, but when you scroll to the bottom I keep getting on the re-render: TypeError: newData.map is not a function

Answer 1

The problem is that you're changing newData to an object

setnewData({...prevData,...nextData})

use

setnewData([...prevData,...nextData])

instead.