来自 useEffect 的数据 return 无限滚动/错误

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() 所述：

The push() method adds one or more elements to the end of an array and returns the new length of the array.

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

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

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

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

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

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

来自 useEffect 的数据 return 无限滚动/错误

Infinite scroll / error with the data return from useEffect

javascript

reactjs

infinite-scroll