javascript - 在 ReactJS 的列表中连接更多项目时保持滚动位置

Question

我在 ReactJS 商店中有这个产品列表:

{productsList.map((product) => (
  <ProductItem
    product={product}
  />
)}

当我在此列表中添加更多产品时，滚动位置转到列表末尾。添加更多产品的代码:

function nextPage() {
  getMoreProducts().then((newProducts)=> {
    setProductsList(productsList.concat(newProducts))
  })
}

我需要保持滚动位置，因为这样用户必须滚动到顶部才能看到加载的新产品。

我已经尝试存储滚动位置，但是更改是在列表增长之前完成的，所以没有任何反应:

function nextPage() {
  const actualScrollPosition = window.pageYOffset
  getMoreProducts().then((newProducts)=> {
    setProductsList(productsList.concat(newProducts))       //<- setState from React is async.
    window.scroll({ top: actualScrollPosition, behavior: "smooth" });
  })    
}

Answer 1

尝试在 useLayoutEffect 中设置由 productsList 更改触发的滚动位置:

import React from 'react'

type Product = {
  name: string
}

const getMoreProducts = async () => ([{name:'foo'}])

export const ProductItem: React.FC<{ product: Product> = ({ product }) => {
  return <div>{product.name}</div>
}

export const ProductList: React.FC = () => {
  const [productsList, setProductsList] = React.useState([])

  let pageYOffset = window.pageYOffset

  function nextPage() {
    getMoreProducts().then((newProducts)=> {
      pageYOffset = window.pageYOffset
      setProductsList(productsList.concat(newProducts))
    })    
  }

  React.useLayoutEffect(() => {
    window.scroll({ top: pageYOffset });
  }, [productsList])

  return (
    <>
      {productsList.map((product) => (
        <ProductItem
          product={product}
        />
      ))}
      <button onClick={nextPage}>Load more</button>
    </>
  )
}

在这种情况下，您也不希望行为:“平滑”。