Предупреждение: Ошибка типа проп: неверная ошибка `ошибка` типа` строка` ожидается `логическое`

Question

В моем проекте ReactJS есть компонент Textfield Material-Ui.

Когда я запускаю свой код, я получаю предупреждение в консоли:

index.js:1 Warning: Failed prop type: Invalid prop `error` of type `string` supplied to `ForwardRef(TextField)`, expected `boolean`.

Мой компонент код ниже.

 <TextField
   required
   error={errorMessages.myErrorMessage}
   helperText={errorMessages.myErrorMessage}
   value={myTextField}
  />

Этот код работает совершенно нормально, но проблема в том, что он выдает предупреждение в консоли.

Я хочу, чтобы сообщение об ошибке отображалось только в том случае, если значение «errorMessages.myErrorMessage» не является пустой строкой.

Есть ли ES6 или другое решение для этого?

Answer 1

Свойство error для TextField ожидает логическое значение, но вы передаете ему строку.

Если вы хотите отобразить ошибку, если errorMessages.myErrorMessage не пустая строка, вы можете проверить длина строки, например:

<TextField
   required
   error={errorMessages.myErrorMessage.length > 0}
   helperText={errorMessages.myErrorMessage}
   value={myTextField}
/>

В качестве альтернативы вы также можете использовать !!errorMessages.myErrorMessage вместо errorMessages.myErrorMessage.length > 0.
Это использует тот факт, что пустая строка falsy и все остальные строки правдивые

Answer 2

Я думаю, вам нужно сделать это

 <TextField
   required
   error={!!errorMessages.myErrorMessage}
   helperText={errorMessages.myErrorMessage}
   value={myTextField}
  />

Таким образом, вы передаете false, если errorMessages.myErrorMessage - пустая строка. И компонент реагирования ожидает, что ошибка будет иметь тип boolean, true или false.

Answer 3

на самом деле ваша ошибка = {!! errorMessages.myErrorMessage}, выполняемая каждый раз, не имеет значения, есть ли ошибка или нет, поэтому используйте условие типа «errorMessages? ErrorMessages.myErrorMessage: void 0», а также избегайте передачи логического значения, такого как true или false ...... Счастливое кодирование