警告：道具类型失败：类型为“字符串”的无效道具“错误”预期为“布尔”答案

【问题标题】：Warning: Failed prop type: Invalid prop `error` of type `string` expected `boolean`警告：道具类型失败：类型为“字符串”的无效道具“错误”预期为“布尔”
【发布时间】：2020-07-18 16:36:31
【问题描述】：

我的 ReactJS 项目中有一个 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 或任何其他解决方案？

【问题讨论】：

试试这个（errorMessages.myErrorMessage == 'true'）

标签： javascript reactjs ecmascript-6

【解决方案1】：

TextField 的 error 属性需要一个布尔值，但您传递的是一个字符串。

如果您想在errorMessages.myErrorMessage 不是空字符串时显示错误，您可以检查字符串的长度，例如：

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

您也可以使用!!errorMessages.myErrorMessage 代替errorMessages.myErrorMessage.length > 0。
这使用了一个空字符串是falsy 而所有其他字符串是truthy 的事实

【讨论】：

哇！我怎么想不到这一点。谢谢！！。两者都有效，所以我选择较短的“！！”符号。两种方式之间有性能差异吗？
@BahadırKorumaz 两者的表现应该差不多

【解决方案2】：

我认为你需要这样做

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

如果 errorMessages.myErrorMessage 为空字符串，则通过这种方式传递 false。并且 react 组件期望 error 为布尔类型，true 或 false。

【讨论】：

【解决方案3】：

实际上你的 error={!!errorMessages.myErrorMessage} 每次执行都无所谓是否有错误，所以请使用 if 条件，如“errorMessages ? errorMessages.myErrorMessage : void 0”，并避免传递布尔值，如 true 或 false ......快乐编码

【讨论】：

这样我们仍然传递字符串，因为我们的 errorMessages.myErrorMessage 仍然是一个字符串。不是吗？
我不认为这个字符串。否则，您可以检查它的字符串或布尔值，只需编写 typeof myerrormessages

【解决方案4】：

最好与可选链接一起使用此修复程序

{!!errorMessages?.myErrorMessage}

【讨论】：