Как правильно вызывать useState в пользовательском хаке React? - PullRequest
Новая
       11

Как правильно вызывать useState в пользовательском хаке React?

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

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

React Hook "useLastPage" вызывается в функции "handleLastPage", которая не является ни компонентом функции React, ни пользовательской функцией React Hook

в следующем коде: 

function usePrevPage (page) {
    const [lastPage, useLastPage] = useState(page)
    useEffect(() => {
        function handleLastPage(page) {
            useLastPage(page - 1)
        }
        handleLastPage()
    })
    return lastPage
}

Мой код очень близко отражает пример пользовательского хука в React Doc, поэтому я не уверен, как вызвать useLastPage в моем пользовательском хуке. Ниже приведен пример из React's Doc : 

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

Ответы [ 3 ]

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

React сбит с толку, так как вы используете useLastPage для обновления const [lastPage, useLastPage] = useState(page).

Попробуйте изменить useLastPage на setLastPage.Вы должны использовать use префикс для крючков.

Проверьте демо - https://codesandbox.io/s/crazy-neumann-hgely

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

useEffect аналогично componentDidMount и componentDidUpdate.Он будет работать, когда Component mounted/updated.Чтобы уменьшить значение состояния lastPage, вы можете просто вызвать его установщик непосредственно внутри обратного вызова useState.Также я предлагаю изменить префикс установщика на set вместо use

function usePrevPage (page) {
    const [lastPage, setLastPage] = useState(page);
    useEffect(() => {
          setLastPage(page-1);
    });
    return lastPage;
}

Если вы хотите изменить значение при нажатии кнопки, вам нужно написать обработчик за пределами useEffect и установить его вкнопка onClick проп.

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

Я думаю, что ваша основная проблема в том, что вы вызываете функцию set useLastPage - React linter ищет функции, которые начинаются со слова use, и пытается «связать» их как ловушки. В этом случае useLastPage - это не ловушка, это возвращенный установщик из useState. Я подозреваю, что если вы назовете это setLastPage, это очистит вас от сообщения об ошибке.

...