无效的钩子调用 - useContext - React Hooks

Question

I am getting an error invalid hooks call when I am using useContext in function. Please find below code. and suggest solution.

import React from 'react';
import { AddlistContext } from '@contexts';

const asyncCall = (value) => {
  const context = React.useContext(AddlistContext);
  console.log(value, context);
  return '';
};

Here is the code Using context in validation.js

Please I need help desperately.

Thanks in Advance

Answer 1

Your ValueRequired is not a component, or at least you're not using it as a component. At the moment, you are calling it as a plain function.

I know that there is a lot of confusion between a function and a react functional component as the latter seems to be simply a function. To create a component, the first thing you need is a named function, an anonymous function cannot be a component, with a capital first letter ( doc ). But most importantly, you need to call it in a way that make React render it, otherwise there is no way you can us React functionality like hooks or context.

For ValueRequired to not throw an error, you need to call it like this:

// Somewhere in you're render function
<ValueRequired />

But that won't solve your problem. In your case, I think you should use the hook pattern as they can access the context:

1. Create a useValueRequired function
2. Call it in your app or the component that manage your form

Try something like this:

const useValueRequired = () => {
    const context = React.useContext(AddlistContext);

    isRequired = value => {
        if (!value) {
            return "value is required";
        }
    }
    
    return {
        isRequired,
    };
}

const App = () => {
    // ...
    const { isRequired } = useValueRequired();
   
    // ...
    <Controller
        render={(props) => {
            return (
                <TextField
                    variant="outlined"
                    label="name"
                    fullWidth
                    {...props}
                    error={errors?.name}
                    helperText={errors?.name?.message}
                />
            );
        }}
        control={control}
        name="name"
        rules={{ validate: isRequired }}
    />

   // ...
}