Как правильно исправить ошибку «Invalid Hook Call» в приложении «Реакция»? - PullRequest
Новая
       1

Как правильно исправить ошибку «Invalid Hook Call» в приложении «Реакция»?

0 голосов
/ 23 марта 2020

Ну, у меня есть эта ошибка 

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Я пробовал много разных вариантов, чтобы это исправить, но мне не удалось.

Вот мой код 

export const DataInput = () => {

    const Post = (testTitle, testText) => {
            useFirestore().collection('schedule-data').doc('test').set({
                testTitle: testTitle,
                testText: testText
            })
         }
    return(
        <Button 
           variant="primary"
           onClick={()=> Post(testTitle, testText)}>
           POST data
        </Button>

Удалил часть кода, который не имеет значения

Ответы [ 3 ]

0 голосов
/ 23 марта 2020

Не вызывайте Hooks внутри циклов, условий или вложенных функций. Вместо этого всегда используйте Hooks на верхнем уровне вашей функции React. Следуя этому правилу, вы гарантируете, что хуки вызываются в том же порядке каждый раз, когда компонент выполняет рендеринг. Это то, что позволяет React правильно сохранять состояние хуков между несколькими вызовами useState и useEffect. (Если вам интересно, объяснение доступно здесь )

0 голосов
/ 23 марта 2020

Согласно вашему коду кода, я могу предложить, что testTitle, testText доступно в DataInput, таким образом, вы можете создать обработчик onClick с useCallback. React создаст обратный вызов для использования в качестве обработчика и заново создаст только при изменении testTitle, testText. 

import {useCallback} from 'react';

export const DataInput = () => {
    const makePost = useCallback(() => {
      useFirestore().collection('schedule-data').doc('test').set({
        testTitle: testTitle,
        testText: testText
      })
    }, [testTitle, testText]);

    return (
    <Button
      variant="primary"
      onClick={makePost}
      {/* Avoid inline callback  declaration */}
    >
      POST data
    </Button>
    )
}
0 голосов
/ 23 марта 2020

Хуки можно вызывать только при рендеринге компонента, поэтому они должны находиться в теле вашего компонента. 

export const DataInput = () => {
  const firestore = useFirestore();
  const Post = (testTitle, testText) => {
    firestore.collection('schedule-data').doc('test').set({
      testTitle: testTitle,
      testText: testText
    })
  }
  // etc
}
...