反应钩子无效的调用钩子

Question

您好，我正在尝试将样式加载到我的 UI 内容中，但我在执行此操作时遇到问题

const useStyles = makeStyles(loginPage)
const classes = useStyles();
const renderTextField = ({
label,
input,
meta: { touched, invalid, error },
...custom
}) => (
<TextField
label={label}
placeholder={label}
variant="outlined"
InputLabelProps={{
classes: {
root: classes.label,
focused: classes.focusedLabel,
error: classes.erroredLabel
}
}}
InputProps={{
classes: {
root: classes.cssOutlinedInput,
focused: classes.cssFocused,
notchedOutline: classes.notchedOutline,
},
startAdornment: (
<InputAdornment position="start">
<PersonSharpIcon style={{ fontSize: 25  , color: 'rgba(20, 176, 12,0.9)' }} />
</InputAdornment>
)
}}
error={touched && invalid}
helperText={touched && error}
{...input}
{...custom}
/>
)

错误：

错误：挂钩调用无效。钩子只能在身体内部调用 函数组件。

有人可以帮我如何解决这个问题吗？

Answer 1

正如错误消息所说。您需要将钩子移动到函数组件的主体内。

React 将每个以 'use' 开头的函数视为一个钩子。所以在你的情况下，它是useStyles().React 还希望这些函数只能从函数组件体的内部调用，并且只能从它的根调用(所以把它嵌套在循环或条件语句中是一个很大的禁忌——你可以在这里阅读它(。你的函数组件是renderTextField的，所以你可以看到你在renderTextField的身体之外调用useStyles()。

像这样构建它应该会有所帮助：

const useStyles = makeStyles(loginPage);
const RenderTextField = ({
label,
input,
meta: { touched, invalid, error },
...custom
}) => {
const classes = useStyles(); // <-- Move it here
return (
<TextField
label={label}
...
>
...
</TextField>
);
}