React Hooks заявляет, что всегда на шаг позади - PullRequest
Новая
       12

React Hooks заявляет, что всегда на шаг позади

0 голосов
/ 17 мая 2019

У меня проблемы со страницей сброса = 1. В handleSearchClick у меня есть setPage(1), но он запаздывает на один клик, поэтому после второго клика страница будет сброшена до 1

Это мой текущийкод 

const [page, setPage] = React.useState(1);
//Other states as well 

    /**
     * Handles event on search click
     */
    const handleSearchClick = async () => {
        setItems([]);
        const database = handleBaseId();
        setPage(1);
        const items = await fetchSearchPayload(page, value, option, database);
        setIsLoading(false);
        setItems(items);
    };

Я также пытался сбросить страницу в самой кнопке, но получал react limits the number of renders to prevents an infinite loop сообщение об ошибке

Это то, что я пытался сделать 

<SearchBar
     onClickButton={handleSearchClick}
     onValueChange={handleChange}
     value={value}
     pageNum={page}
     onEnter={handleSearchOnEnter}>

   {setPage(1)}

</SearchBar>

Я также попытался использовать useEffect и добавил состояние count, которое увеличивается каждый раз, когда нажимается searchBar, но у меня были проблемы с самим подсчетом, являющимся шагом позади. 

const [count, setCount] = React.useState(0);

React.useEffect(() => {
        setPage(1);
    }, [count]);

    /**
     * Handles event on search click
     */
    const handleSearchClick = async () => {
        setCount(count+1);
        setItems([]);
        const database = handleBaseId();
        setPage(1);
        const items = await fetchSearchPayload(page, value, option, database);
        setIsLoading(false);
        setItems(items);
    };

Любые предложения о том, как сбросить page без каких-либо задержек, приветствуются!

Ответы [ 2 ]

1 голос
/ 17 мая 2019

Кажется, вы пытаетесь установить страницу (асинхронно) и сразу после этого используете состояние page в вашем вызове fetchSearchPayload.Учитывая, что вы жестко программируете, всегда устанавливая страницу на 1, вы также можете жестко закодировать 1 в своем вызове fetchSearchPayload.

Другой путь, по которому вы могли бы пойти, - это выполнить асинхронный вызов только после обновления страницы, выполнивкак то так: 

React.useEffect(() => {
    const database = handleBaseId();
    const items = await fetchSearchPayload(page, value, option, database);
    setIsLoading(false);
    setItems(items);
}, [ page ]);

/**
 * Handles event on search click
 */
const handleSearchClick = async () => {
    setItems([]);
    setPage(1);
};
0 голосов
/ 17 мая 2019

Проблема заключается в том, что обновления состояния асинхронны с модулем обновления состояния ловушек, как и setState в компонентах реагирования.Решение состоит в том, чтобы передать страницу для работы вручную, а не в зависимости от состояния 

/**
 * Handles event on search click
 */
const handleSearchClick = async () => {
    setItems([]);
    const database = handleBaseId();
    setPage(1);
    const items = await fetchSearchPayload(1, value, option, database);
    setIsLoading(false);
    setItems(items);
};
...