Javascript 钩子调用无效-useContext-React钩子

在函数中使用useContext时，我收到一个错误无效挂钩调用。请查找下面的代码。并提出解决方案

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

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

在validation.js中使用上下文

求求你，我急需帮助

---

提前感谢

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

我知道函数和react函数组件之间有很多混淆，因为后者似乎只是一个函数。要创建一个组件，首先需要一个命名函数，匿名函数不能是首字母大写的组件（）。但最重要的是，您需要以一种使React呈现它的方式调用它，否则您无法对钩子或上下文之类的功能进行反应

要使ValueRequired不抛出错误，需要如下调用：

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

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

   // ...
}

//在渲染函数中的某个地方

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

创建useValueRequired函数

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

试着这样做：

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

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

   // ...
}

const useValueRequired=（）=>{
const context=React.useContext（AddlistContext）；
isRequired=值=>{
如果（！值）{
返回“值是必需的”；
}
}
返回{
需要，
};
}
常量应用=（）=>{
// ...
const{isRequired}=useValueRequired（）；
// ...
{
返回(
);
}}
control={control}
name=“name”
规则={{validate:isRequired}
/>
// ...
}

您是否尝试过使用AsyncCall？很确定这只是你的皮棉。如果不是，那就是你打电话的地方。请记住，钩子只能从组件的生命周期内部调用。您只能在react函数组件或其他钩子中使用钩子。这只是一个函数，所以它不起作用。将其转换为组件或使用来自函数component的AsyncCall。钩子只是函数。。。组件是的，但它们需要react context=>所以必须在钩子或函数组件中调用它们。这正是我的观点。这段代码没有什么问题，所以可能是一个linter问题（如果只是一个警告）或者它的名称Hi Joessel：它似乎适用于一种方法。如何使用上述解决方案通过多个验证方法？谢谢@P.E.Joessel。上述解决方案完全符合我的要求