javascript - 为什么更新对象状态后我的对象不会重新渲染？

Question

我正在尝试迭代我的 json 以创建无限滚动。加载时，我显示前 2 条记录。当有人滚动到页面底部时，我尝试更新我的对象以显示当前 2 条记录并将下 2 条记录附加到该对象。

我尝试通过将当前对象和新对象与接下来的两条记录合并来更新对象的状态，但我不断收到“TypeError:newData.map 不是函数”

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;

当您滚动到页面底部时，我希望卡片会更新以显示当前记录以及接下来的两条记录，但是当您滚动到底部时，我不断出现重新渲染:TypeError: newData.map 不是函数

Answer 1

问题是您正在将 newData 更改为对象

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

使用

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

相反。