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])

相反。

为什么在更新对象的状态后不重新渲染对象？

1 个答案: