Ошибка получения - хуки могут вызываться только внутри тела компонента функции при реализации базового примера React Spring - PullRequest
Новая
       53

Ошибка получения - хуки могут вызываться только внутри тела компонента функции при реализации базового примера React Spring

1 голос
/ 23 марта 2019

У меня есть приложение next.код самого приложения (pages, static и т. д.) находится в папке в репозитории.называется frontend.Приложение.сам обслуживается через сервер express через другую папку в репо.звонил backend.

Во-первых, я не уверен, является ли лучшим разделение этих двух, но лично мне нравится делать это таким образом.Обе папки имеют свои собственные соответствующие файлы package.json и package-lock.json.

Я также запускаю ApolloServer на внутреннем экспресс-сервере через конечную точку /graphql.Приложение.работает нормально, пока я не попробую реализовать компонент с реагирующими хукамиА именно очень простой пример, предоставленный react-spring, как показано ниже: 

import { useSpring, animated } from 'react-spring'

function App() {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } })
  return <animated.div style={props}>I will fade in</animated.div>
}

Я переименовал это с App на SpringDemo, и оно вызывается просто в компоненте страницынапример: 

function Home() {
  return (
    <div>
      <SpringDemo />
    </div>
  )
}

export default Home

При обслуживании моего приложения через сервер express в папке backend в браузере появляется следующая ошибка: 

Invariant Violation: Invalid hook call. Hooks can only be called inside of the 
body of a function component. 
This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

У вас могут быть несовпадающие версии React и средства визуализации (например, React DOM)

Я не верю, что это так, из моих соответствующих файлов package.json:

frontend/package.json

    "react": "^16.8.5",
    "react-apollo": "^2.5.2",
    "react-dom": "^16.8.5",

backend/package.json

    "react": "^16.8.5",
    "react-dom": "^16.8.5",

Все версии, по-видимому, соответствуют не позднее 16.8.5.

Возможно, вы нарушаете Правила Крюков

Маловероятно с копией вставленного примера из react-spring документов.

Выможет иметь более одной копии React в одном приложении

Я не верю, из моего package.json, указанного выше, но я не уверен.Я прочитал эту https://github.com/facebook/react/issues/14823 проблему, которая затем указала мне на эту https://github.com/apollographql/react-apollo/issues/2792, но я не могу быть уверен, что это причина.Просмотр файла package-lock.json не выясняет (по крайней мере мне), действительно ли я использую другую версию react / react-dom через react-apollo.

Проверка package.json наreact-apollo репо.здесь: https://github.com/apollographql/react-apollo/blob/master/package.json предполагает, что они используют одну и ту же версию react и react-dom, хотя и отличаются от моей версии react и react-dom, как указано выше:

react-apollo/package.json

    "react": "16.8.4",
"react-dom": "16.8.4",

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

Как я могу решить эту проблему и выяснить, действительно ли я использую несколько копий react / react-dom?Для меня это не было проблемой с чем-то другим, основанным на реакциях.

РЕДАКТИРОВАТЬ :

Надеюсь, что помогу, я создал списки моих соответствующих package.jsonpackage-lock.json файлы:

frontend/package.json - https://gist.github.com/benlester/c7d82d7ad46cae9b8972284baba003a6

frontend/package-lock.json - https://gist.github.com/benlester/8f85b3fa290e67445ee0b2df365d8307

backend/package.json - https://gist.github.com/benlester/0c8004bdbb5b87c50734ba8044c35cee

backend/package-lock.json - https://gist.github.com/benlester/29f7a25f2ee633a13bdbdcee28270ddf

npm ls react - frontend

frontend@0.0.1 [directory]
└── react@16.8.5

npm ls react - бэкэнд такой же, как и выше.

1 Ответ

1 голос
/ 24 марта 2019

Мне удалось это исправить, изменив структуру проекта.

Вместо отдельных package.json и package-lock.json в каждой из папок frontend и backend у меня теперь естьодиночные package.json и package-lock.json в корневой папке (вместе с одной папкой node_modules).

Я не знаю, почему это решает проблему, как указано в моем вопросе выше всего моего *Версии 1012 * и react-dom, казалось, совпали друг с другом, и я правильно использовал крючки.

Мне также не особенно нравится это решение, так как оно заставляет меня (по крайней мере, с одним репо) использоватьЕдиный источник для внешних и внутренних зависимостей.

Если кто-нибудь знает о лучшем способе управления внешними и внутренними смешанными командами.Я весь слух в комментариях.

...