时间戳

首页 > 解决方案 > 从 useEffect 返回的数据无限滚动/错误

javascript - 从 useEffect 返回的数据无限滚动/错误

问题描述

我在一个基本的无限滚动上工作，我在从Items.

它适用于我的useEffect电话，我console.log它，一切都在那里。但是随后将值设置为 1... 为什么？谢谢

const List = () => {

    const [Items, setItems] = useState([]);
    const [fetchData, setFetchData] = useState((listSize > lot) ? lot : listSize);
    const [Limits, setLimits] = useState(true);

    console.log(Items); // got empty first time and then 1

    useEffect(() => {
        let nvxPic = list.slice(fetchData - lot, fetchData);
        setItems(Items.push(nvxPic.map((image, key) => (
            <img key={key} src={`Images/${image}`} alt="" />
        ))))
        console.log(Items); // got my array
    }, [fetchData])

    const fetchMoreData = async () => {
        if (fetchData + lot > listSize) {
            setFetchData(listSize);
            setLimits(false);
        }
        else
            setFetchData(fetchData + lot);
    };

    return (
        <div>
            <InfiniteScroll
                dataLength={fetchData}
                next={fetchMoreData}
                hasMore={Limits}
                loader={<h4>Loading...</h4>}
                endMessage={
                    <p style={{ textAlign: "center" }}>
                        <b>Done</b>
                    </p>
                }
            >
                {Items}
            </InfiniteScroll>
        </div>
    );
};

标签： javascriptreactjsinfinite-scroll

解决方案

由于这部分代码，问题正在发生：

setItems(Items.push(nvxPic.map((image, key) => (
   <img key={key} src={`Images/${image}`} alt="" />
)));

该代码将Items变量的值设置为返回的新数组的长度push。这就是为什么你得到1变量的值。

正如文档Array.prototype.push()所述：

push() 方法将一个或多个元素添加到数组的末尾，并返回数组的新长度。

map为您创建一个新数组，我想您无论如何都不需要推送它。

从Array.prototype.map()文档中，您可以看到：

map() 方法创建一个新数组，其结果是在调用数组中的每个元素上调用提供的函数。

我认为解决方案是，只需push从代码中删除部分：

setItems(nvxPic.map((image, key) => (
   <img key={key} src={`Images/${image}`} alt="" />
));

所以map返回新数组然后setItems更新Items变量的值，你不需要用push.

推荐阅读