Tweak invalid Hook warning and error (#14747)
This commit is contained in:
parent
fec00a869c
commit
c21c41ecfa
|
@ -57,13 +57,15 @@ let currentHookNameInDev: ?string;
|
|||
function resolveCurrentlyRenderingComponent(): Object {
|
||||
invariant(
|
||||
currentlyRenderingComponent !== null,
|
||||
'Hooks can only be called inside the body of a function component.',
|
||||
'Hooks can only be called inside the body of a function component. ' +
|
||||
'(https://fb.me/react-invalid-hook-call)',
|
||||
);
|
||||
if (__DEV__) {
|
||||
warning(
|
||||
!isInHookUserCodeInDev,
|
||||
'Hooks can only be called inside the body of a function component. ' +
|
||||
'Do not call Hooks inside other Hooks. For more information, see ' +
|
||||
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' +
|
||||
'You can only call Hooks at the top level of your React function. ' +
|
||||
'For more information, see ' +
|
||||
'https://fb.me/rules-of-hooks',
|
||||
);
|
||||
}
|
||||
|
|
|
@ -235,7 +235,8 @@ function warnOnHookMismatchInDev() {
|
|||
function throwInvalidHookError() {
|
||||
invariant(
|
||||
false,
|
||||
'Hooks can only be called inside the body of a function component.',
|
||||
'Hooks can only be called inside the body of a function component. ' +
|
||||
'(https://fb.me/react-invalid-hook-call)',
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -1188,8 +1189,9 @@ if (__DEV__) {
|
|||
const warnInvalidHookAccess = () => {
|
||||
warning(
|
||||
false,
|
||||
'Hooks can only be called inside the body of a function component. ' +
|
||||
'Do not call Hooks inside other Hooks. For more information, see ' +
|
||||
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' +
|
||||
'You can only call Hooks at the top level of your React function. ' +
|
||||
'For more information, see ' +
|
||||
'https://fb.me/rules-of-hooks',
|
||||
);
|
||||
};
|
||||
|
|
|
@ -665,7 +665,7 @@ describe('ReactHooks', () => {
|
|||
return null;
|
||||
}
|
||||
expect(() => ReactTestRenderer.create(<App />)).toWarnDev(
|
||||
'Hooks can only be called inside the body of a function component',
|
||||
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks.',
|
||||
);
|
||||
});
|
||||
|
||||
|
@ -835,12 +835,12 @@ describe('ReactHooks', () => {
|
|||
if (__DEV__) {
|
||||
expect(console.error).toHaveBeenCalledTimes(3);
|
||||
expect(console.error.calls.argsFor(0)[0]).toContain(
|
||||
'Hooks can only be called inside the body of a function component',
|
||||
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
it("throws when calling hooks inside useState's initialize function", () => {
|
||||
it("warns when calling hooks inside useState's initialize function", () => {
|
||||
const {useState, useRef} = React;
|
||||
function App() {
|
||||
useState(() => {
|
||||
|
@ -850,7 +850,7 @@ describe('ReactHooks', () => {
|
|||
return null;
|
||||
}
|
||||
expect(() => ReactTestRenderer.create(<App />)).toWarnDev(
|
||||
'Hooks can only be called inside the body of a function component',
|
||||
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks.',
|
||||
);
|
||||
});
|
||||
|
||||
|
@ -892,9 +892,9 @@ describe('ReactHooks', () => {
|
|||
}).toWarnDev([
|
||||
// We see it twice due to replay
|
||||
'Context can only be read while React is rendering',
|
||||
'Hooks can only be called inside the body of a function component',
|
||||
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
|
||||
'Context can only be read while React is rendering',
|
||||
'Hooks can only be called inside the body of a function component',
|
||||
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
|
||||
]);
|
||||
|
||||
function Valid() {
|
||||
|
@ -925,9 +925,9 @@ describe('ReactHooks', () => {
|
|||
}).toWarnDev([
|
||||
// We see it twice due to replay
|
||||
'Context can only be read while React is rendering',
|
||||
'Hooks can only be called inside the body of a function component',
|
||||
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
|
||||
'Context can only be read while React is rendering',
|
||||
'Hooks can only be called inside the body of a function component',
|
||||
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
|
||||
]);
|
||||
});
|
||||
|
||||
|
|
|
@ -218,7 +218,8 @@ class ReactShallowRenderer {
|
|||
_validateCurrentlyRenderingComponent() {
|
||||
invariant(
|
||||
this._currentlyRenderingComponent !== null,
|
||||
'Hooks can only be called inside the body of a function component.',
|
||||
'Hooks can only be called inside the body of a function component. ' +
|
||||
'(https://fb.me/react-invalid-hook-call)',
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -17,7 +17,8 @@ function resolveDispatcher() {
|
|||
const dispatcher = ReactCurrentDispatcher.current;
|
||||
invariant(
|
||||
dispatcher !== null,
|
||||
'Hooks can only be called inside the body of a function component.',
|
||||
'Hooks can only be called inside the body of a function component. ' +
|
||||
'(https://fb.me/react-invalid-hook-call)',
|
||||
);
|
||||
return dispatcher;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue