无限滚动/错误，来自useEffect的数据返回

Question

我正在进行基本的无限滚动，但是从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>
    );
};

Answer 1

由于代码的这一部分而发生了问题：

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进行此操作。