Как сделать бесконечную функцию выборки прокрутки работать в порядке

Если вы используете SQL Server 2005+, вы можете использовать функцию PIVOT для преобразования данных из строк в столбцы.

Похоже, вам понадобится использовать динамический sql, если недели неизвестны, но вначале легче видеть правильный код с использованием жестко кодированной версии.

Сначала рассмотрим некоторые быстрые определения таблиц и данные для использования:

CREATE TABLE #yt 
(
  [Store] int, 
  [Week] int, 
  [xCount] int
);

INSERT INTO #yt
(
  [Store], 
  [Week], [xCount]
)
VALUES
    (102, 1, 96),
    (101, 1, 138),
    (105, 1, 37),
    (109, 1, 59),
    (101, 2, 282),
    (102, 2, 212),
    (105, 2, 78),
    (109, 2, 97),
    (105, 3, 60),
    (102, 3, 123),
    (101, 3, 220),
    (109, 3, 87);

Если ваши значения известны, тогда вы будете жестко запрограммировать запрос:

select *
from 
(
  select store, week, xCount
  from yt
) src
pivot
(
  sum(xcount)
  for week in ([1], [2], [3])
) piv;

См. SQL Demo

Затем, если вам нужно сгенерировать неделю номер динамически, ваш код будет:

DECLARE @cols AS NVARCHAR(MAX),
    @query  AS NVARCHAR(MAX)

select @cols = STUFF((SELECT ',' + QUOTENAME(Week) 
                    from yt
                    group by Week
                    order by Week
            FOR XML PATH(''), TYPE
            ).value('.', 'NVARCHAR(MAX)') 
        ,1,1,'')

set @query = 'SELECT store,' + @cols + ' from 
             (
                select store, week, xCount
                from yt
            ) x
            pivot 
            (
                sum(xCount)
                for week in (' + @cols + ')
            ) p '

execute(@query);

См. SQL Demo .

Динамическая версия генерирует список номеров week, которые должны преобразуется в столбцы. Оба дают тот же результат:

| STORE |   1 |   2 |   3 |
---------------------------
|   101 | 138 | 282 | 220 |
|   102 |  96 | 212 | 123 |
|   105 |  37 |  78 |  60 |
|   109 |  59 |  97 |  87 |

0
задан yuanlai 13 July 2018 в 08:16
поделиться

2 ответа

Поскольку вы используете redux, ваш список элементов должен управляться с помощью действий / редуктора.

InfiniteScroll.js:

onScroll () {
    var nearBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 100;
    if (!this.props.fetching && nearBottom) {
        fetchItems();  // dispatch action
    }
}

render () {
    var items = this.props.items.map(item => (<Component {item}/>)

    return (
        <ul>{ items }</ul>
    )
}

componentDidMount() {
    window.addEventListener("scroll", this.onScroll.bind(this), false);
}
componentWillUnmount() {
    window.removeEventListener("scroll", this.onScroll.bind(this), false);
}

действия:

fetchItems () {
    return dispatch => {
        dispatch({
            type: "FETCH_ITEMS"
        });
        fetch("/api/items")
        .then(items => {
            dispatch(itemsReceived(items));
        });
    }
}
itemsReceived (items) {
    return {
        type: "ITEMS_RECEIVED",
        payload: {
            items: items
        }
    }
}

редуктор:

case "FETCH_ITEMS":
    return {
        ...prevState,
        fetching: true

case "ITEMS_RECEIVED":
    return {
        ...prevState,
        fetching: false,
        items: prevState.items.concat(items)
    }

Таким образом, свиток прокручивает четко определенное действие (FETCH_ITEMS). Используя redux-thunk, действие вызывает вызов API для извлечения новых элементов. Когда этот вызов будет завершен, вы отправите новое действие для подачи новых элементов через редуктор.

Затем редуктор обновляет состояние, в результате чего <InfiniteScroll> переписывает обновленный список элементов.

ПРИМЕЧАНИЕ. Вы также должны установить fetchching в false в случае ошибки.

1
ответ дан thedarklord47 17 August 2018 в 13:22
поделиться
  • 1
    Это очень вероятно с моим редуктором, но fetchItems будет выполняться много раз, когда onScroll запускается. Вы можете использовать дроссель lodash, чтобы ограничить выполнение один раз, однако у него также есть проблема. – yuanlai 14 July 2018 в 01:19
  • 2
    одна вещь, которую вы могли бы сделать, это заставить поведение дросселирования всякий раз, когда выполняется выборка. Это легко сделать в вашем редукторе. См. Пример выше. Обратите внимание, что всякий раз, когда выполняется выборка fetching, это предотвращает запуск другого запроса. После того, как элементы получены, страница обновляется, и прокрутка снова вызывает запросы на выборку. – thedarklord47 17 July 2018 в 20:01

Если бы я был вами, я бы использовал библиотеку, чтобы сделать тяжелый подъем для меня.

Один из вариантов - response-infin-scroller .

Вот как может выглядеть ваш прецедент, в основном псевдокод:

<InfiniteScroll
    pageStart={0}
    loadMore={fetchItems} // that's your method for loading more results
    hasMore={props.pageindex === preProps.pageindex + 1} // your 'has more' logic
    loader={<div className="loader">Loading ...</div>}
>
    {items} // <-- This is the content you want to load
</InfiniteScroll>

Для рабочего примера проверьте демонстрацию в своем репо .


Другой вариант - попытаться отладить ваш код. Но вам нужно предоставить больше контекста. Из предоставленной вами информации очень сложно сказать, что не так.

0
ответ дан Kaloyan Kosev 17 August 2018 в 13:22
поделиться
  • 1
    Я постараюсь завершить его первым, извините за это. – yuanlai 14 July 2018 в 01:05
  • 2
    Хорошо. Я хочу вам помочь, но у меня недостаточно контекста. Обновите свой вопрос и объясните, в чем проблема. Попробуйте сделать полный пример, и кто-то может его отладить. – Kaloyan Kosev 14 July 2018 в 10:26
Другие вопросы по тегам:

Похожие вопросы: