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

Question

当我在函数中使用 useContext 时，出现错误 invalid hooks call。请找到下面的代码。并提出解决方案。import React from 'react';import { AddlistContext } from '@contexts';const asyncCall = (value) => {  const context = React.useContext(AddlistContext);  console.log(value, context);  return '';};这是在validation.js中使用上下文的代码请帮帮我，我非常需要帮助。提前致谢

Answer 1

您的 ValueRequired 不是组件，或者至少您没有将其用作组件。目前，您将其作为普通函数调用。

我知道函数和 React 函数组件之间存在很多混淆，因为后者似乎只是一个函数。要创建组件，首先需要一个命名函数，匿名函数不能是组件，且首字母大写。但最重要的是，你需要以一种让 React 渲染它的方式调用它，否则你无法使用像钩子或上下文这样的 React 功能。

为了使 ValueRequired 不引发错误，您需要像这样调用它：

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

但这并不能解决你的问题。在你的情况下，我认为你应该使用钩子模式，因为它们可以访问上下文：

1. 创建 useValueRequired 函数

2. 在您的应用程序或管理表单的组件中调用它

尝试这样的事情：

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 }}

    />

   // ...

}