Бесконечная прокрутка / ошибка с возвратом данных из useEffect - PullRequest
Новая
       21

Бесконечная прокрутка / ошибка с возвратом данных из useEffect

0 голосов
/ 07 ноября 2019

Я работаю над базовой бесконечной прокруткой, и у меня возникла проблема с получением данных из 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>
    );
};

1 Ответ

0 голосов
/ 07 ноября 2019

Проблема возникает из-за этой части кода: 

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.

...