Возвращенная функция React Custom Hook set не является функцией - PullRequest
Новая
       4

Возвращенная функция React Custom Hook set не является функцией

2 голосов
/ 08 мая 2020

Итак, я создал собственный хук для извлечения данных из api. Вот код: 

export const useLambdaApi = () => {
  const [data, setData] = useState()
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    const fetchData = async () => { ... }
    fetchData();
  },[isLoading]);

  return [data, setIsLoading];
}

И в компоненте мне нужны данные, которые я делаю: 

export default function Comp (props) {
  const [data, setIsLoading] = useLambdaApi()

  useEffect(() => {
    const interval = setInterval(() => {
      setIsLoading(true)
      console.log(Date())
    }, 10000);
    return () => {
      window.clearInterval(interval); // clear the interval in the cleanup function
    };
  },[data]);
  return( ... )
}

Но я получаю TypeError: TypeError: setIsLoading is not a function

I знаю, что это должно быть что-то глупое, но я относительно новичок в React, поэтому любая обратная связь будет очень полезна.

Спасибо.

EDIT:

To предоставить больше контекста Я добавил больше кода в свой фрагмент компонента. Пытаюсь обновить состояние isLoading с setInterval. Но я также пробовал из useEffect без интервала и вне useEffect ...

Это трассировка стека: 

PatientBoard.js:26 Uncaught TypeError: setIsLoading is not a function
    at PatientBoard.js:26
(anonymous) @ PatientBoard.js:26
setInterval (async)
(anonymous) @ PatientBoard.js:25
commitHookEffectList @ react-dom.development.js:21100
commitPassiveHookEffects @ react-dom.development.js:21133
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:466
flushPassiveEffectsImpl @ react-dom.development.js:24223
unstable_runWithPriority @ scheduler.development.js:676
runWithPriority$2 @ react-dom.development.js:11855
flushPassiveEffects @ react-dom.development.js:24194
(anonymous) @ react-dom.development.js:23755
scheduler_flushTaskAtPriority_Normal @ scheduler.development.js:451
flushTask @ scheduler.development.js:504
flushWork @ scheduler.development.js:637
performWorkUntilDeadline @ scheduler.development.js:238

1 Ответ

1 голос
/ 08 мая 2020

Используйте это так:

Обновлено: Повторная выборка триггера на основе изменений URL: 

import React, { useEffect, useState } from "react";

// Passing URL as a parameter
export const useLambdaApi = (url) => {
  const [data, setData] = useState();
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const data = await response.json();

      // Set stats
      setIsLoading(false);
      setData(data);
    };
    fetchData();

  // Passing URL as a dependency
  }, [url]);

  // Return 'isLoading' not the 'setIsLoading' function
  return [data, isLoading];
};

// Using Hook into your component
export default function App() {
    // State will be changed if URL changes
    const [data, isLoading] = useLambdaApi('Your URL');

  // Loading indicator
  if (isLoading) return <div>Loading..</div>;

  // Return data when isLoading = false
  return (
    <div className="App">
      // Use data..
    </div>
  );
}

Вот codeandbox пример.

...