无效的钩子调用 - 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 />但这并不能解决你的问题。在你的情况下，我认为你应该使用钩子模式，因为它们可以访问上下文：创建 useValueRequired 函数在您的应用程序或管理表单的组件中调用它尝试这样的事情：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 }}    />   // ...}