реагировать на недействительные перехватчики вызовов - PullRequest
Новая
       28

реагировать на недействительные перехватчики вызовов

0 голосов
/ 11 декабря 2019

Здравствуйте, я пытаюсь загрузить стиль в свой пользовательский интерфейс, но у меня возникают проблемы при этом 

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

ошибка:

Ошибка: неверный вызов ловушки. Хуки можно вызывать только внутри тела компонента функции.

Может ли кто-нибудь помочь мне, как я могу решить эту проблему?

1 Ответ

0 голосов
/ 11 декабря 2019

Это именно так, как говорится в сообщении об ошибке. Вам нужно переместить хук внутри тела компонента функции.

React рассматривает каждую функцию, начинающуюся с «использования», как хук. Так что в вашем случае это useStyles(). React также ожидает, что такие функции будут вызываться только изнутри тела компонентов функции и только из его корня (поэтому вложение его в циклы или условные операторы - это большое «нет» - вы можете прочитать об этом здесь ). Ваш функциональный компонент - renderTextField, так что, как вы видите, вы вызываете useStyles() ВНЕ тела renderTextField.

Структурирование этого примерно так должно помочь: 

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