时间戳

首页 > 解决方案 > 无效的钩子调用 - useContext - React Hooks

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

问题描述

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

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

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

这是 在validation.js中使用上下文的代码

请我迫切需要帮助。

提前致谢

标签： javascriptreactjsreact-hooks

解决方案

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

我知道函数和反应函数组件之间存在很多混淆，因为后者似乎只是一个函数。要创建组件，首先需要的是命名函数，匿名函数不能是组件，首字母大写（doc）。但最重要的是，你需要以一种让 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 }}
    />

   // ...
}

推荐阅读