Я отримую цю помилку під час використання useStateгачка. Я маю це в базовій формі, дивлячись на реакційні документи для посилання, але все ще отримую цю помилку. Я готовий до моменту долоні обличчя ...
export function Header() {
const [count, setCount] = useState(0)
return <span>header</span>
}
Відповіді:
react-hot-loaderЗараз вийшла нова версія , посилання . Гачки зараз працюють нестандартно. Дякую автору, Каші.
Ознайомтеся з цим типовим шаблоном https://github.com/ReeganExE/react-hooks-boilerplate
Спочатку переконайтеся, що ви встановили react@nextтаreact-dom@next .
Тоді перевірте, react-hot-loaderчи використовуєте ви чи ні.
У моєму випадку вимкніть гарячий завантажувач, і HMR може змусити його працювати.
Див. Https://github.com/gaearon/react-hot-loader/issues/1088 .
Цитується:
Так. RHL на 100% не сумісний з гачками. За цим є лише кілька причин:
SFC перетворюються на компоненти класу. Є причина - мати можливість примусово оновити HMR, поки на SFC не існує методу "оновлення". Я шукаю інший спосіб примусового оновлення (наприклад, так. Тож RHL вбиває SFC.
"hotReplacementRender". RHL намагається виконати роботу React та відтворити стару та нову програму, щоб об'єднати їх. Тож, очевидно, зараз це зламано.
Я збираюся скласти PR, щоб пом'якшити обидві проблеми. Це спрацює, але не сьогодні.
Існує більш правильне виправлення, яке могло б працювати - холодний API
Ви можете вимкнути RHL для будь-якого нестандартного типу.
import { cold } from 'react-hot-loader';
cold(MyComponent);
Шукайте "useState/useEffect"всередині вихідного коду компонента і "холодно" його.
Відповідно до оновлення, яке додав реагент-гарячий завантажувач, ви можете спробувати react-hot-loader@nextвстановити конфігурацію нижче:
import { setConfig } from 'react-hot-loader';
setConfig({
// set this flag to support SFC if patch is not landed
pureSFC: true
});
Дякуємо @loganfromlogan за оновлення.
cold. Так {MyComponent(props)}не буде працювати, але <MyComponent {...props} />буде.
Моя проблема полягала в тому, що я забув оновити react-domмодуль. Див. Випуск .
Був той самий випуск. Моя проблема була пов'язана з React Router. Я випадково використовував
<Route render={ComponentUsingHooks} />
замість
<Route component={ComponentUsingHooks} />
Я зміг це вирішити, імпортуючи примітивні хуки React у файл компонента, а потім передавши їх у мої власні хуки. З якоїсь причини помилка виникає лише тоді, коли я імпортую гачок React (наприклад, useState) у своєму користувацькому файлі хука.
Я імпортую useState у файл компонента:
import React, {useState} from 'react'; // import useState
import {useCustomHook} from '../hooks/custom-hook'; // import custom hook
const initialState = {items: []};
export default function MyComponent(props) {
const [state, actions] = useCustomHook(initialState, {useState});
...
}
Потім у моєму файлі хука:
// do not import useState here
export function useCustomHook(initialValue, {useState}) {
const [state, setState] = useState(initialValue || {items: []});
const actions = {
add: (item) => setState(currentState => {
const newItems = currentState.items.concat([item]);
return {
...currentState,
items: newItems,
};
}),
};
return [state, actions];
}
Цей метод покращив перевірку моїх хуків, тому що мені не потрібно глузувати з бібліотеки React, щоб надати примітивні хуки. Натомість ми можемо передати фіктивний useStateгачок прямо у функцію користувацького гачка. Я думаю, це покращує якість коду, оскільки ваші власні хуки тепер не пов'язані з бібліотекою React, що дозволяє більш природне функціональне програмування та тестування.
Я відчув цю помилку під час використання гарячої заміни модуля Parcel і виправив її оновленням react-domдо альфа-версії:
yarn add react-dom@16.7.0-alpha.0
У мене була проблема в monorepo, де пакет docz використовуєтьсяreact@16.6.3 і остаточний висновок пучка мав дві версії реагувати.
Виправлено, видаливши пакет 😅
Проблемою для мене справді була реакція гарячого завантажувача .
Ви можете вимкнути реакцію гарячого завантажувача для одного компонента замість усієї програми, використовуючи такий coldспосіб:
import { cold } from 'react-hot-loader'
export const YourComponent = cold(() => {
// ... hook code
return (
// ...
)
})
АБО
export default cold(YourComponent)
Просто розробити на @ rista404 відповідає, в тому числі дубльованих версій з react(і , можливо react-dom) дасть ту ж помилку , в залежності від того, де ви використовуєте свої гачки. Ось два приклади ...
reactв її dependencies, швидше за все , помилково , як reactправило , повинна бути рівноправною залежністю. Якщоnpm ця версія не виводиться автоматично з вашої локальної версії, ви можете побачити цю помилку. Ось на що мав на увазі @ rista404.npm linkпакет, який включає reactв себе devDependenciesабо dependencies. Тепер для модулів цього пакету ви можете побачити помилки, якщо вони витягують іншу версію файлу reactз локального node_modulesкаталогу, а не батьківського проекту.Останнє можна виправити при поєднанні webpack, використовуючи resolve.aliasяк так ...
resolve: {
alias: {
'react': path.resolve(__dirname, 'node_modules/react'),
'react-dom': path.resolve(__dirname, 'node_modules/react-dom')
}
}
Це забезпечить reactзавжди витягування з node_modulesкаталогу батьківського проекту .
Для тих, хто стикається з цією проблемою під час використання MobX та обгортання компонента значком observer, обов’язково використовуйте mobx-react-liteзамість mobx-react.
29 ТРАВНЯ ОНОВЛЕННЯ
Від mobx-react 6.0.0вперед, компоненти на основі гака тепер підтримуються mobx реагують , таким чином, немає необхідності в mobx-react-liteвикористанні більше (якщо це ваша проблема).
знайшов це обхідне рішення, react-hot-loaderпоки цей PR, щоб виправити його, є вхідним.
Оберніть функцію, яка викликає хуки, у React.memo, запобігаючи гарячому перезавантаженню, якщо вона не змінюється.
const MyFunc = React.memo(({props}) => {...
Кредит на рішення: https://github.com/gatsbyjs/gatsby/issues/9489
Моє питання було наступним:
Я робив:
ReactDOM.render(Example(), app);
Тоді як я повинен був робити:
ReactDOM.render(<Example />, app);
Для інших користувачів робочих областей пряжі, ось моя ситуація та як я це зрозумів.
Документи Facebook щодо попередження про недійсний дзвінок на хук нічого не говорять про робочі простори пряжі, тому я припустив, що моя конфігурація була правильною. Але це не було. Виправити помилку можна лише використовуючи ту саму версію для всіх ваших пакетів .
У наведеному вище прикладі вам потрібно встановити версію реакції з "foo" на 16.10.1, щоб вона відповідала версії реакції з "bar".
Бонус: перегляньте цю дискусію на GitHub щодо чудової колекції емоційного багажу, вивантаженого в Інтернеті.
Ще одне рішення, якщо ви стикаєтесь із цим при використанні посилання npm:
Ви можете npm linkреагувати у своїй бібліотеці, як пояснено тут:
https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react
або встановіть реакцію у вашій бібліотеці як peerDependency, а потім використовуйте npm link --only=production
Якщо ви використовуєте Create React App, вам доведеться оновити "react-scripts"версію також за допомогою React і React -Dom версії.
"react-scripts": "2.1.5",
"react": "^16.8.1",
"react-dom": "^16.8.1",
ця комбінація чудово працює.
Для мене це відбувалося через те, що у мене була нова версія реакції (16.8.6) та стара версія реакції-дому (16.6.1).
Оновлення обох до @latest (16.8.6) виправило помилку.
Ну, у моєму випадку я закликав useSelector всередині useEffect !!
оновити пакет.json версія-dom-реакція як реакція