Redux 表单验证符号不在浏览器中呈现？答案

【问题标题】：Redux Form validation symbol does not render in browser?Redux 表单验证符号不在浏览器中呈现？
【发布时间】：2020-04-06 21:27:41
【问题描述】：

如果您访问此网站https://redux-form.com/7.2.0/examples/fieldlevelvalidation/，则显示如果该字段为空，则会显示此错误消息“必填”并带有感叹号： error message image

这是我的 .tsx 文件中的字段代码：

<Field component={renderField} type="text" id="jobid" name="jobids"
    placeholder="enter id"
    validate={[FormValidation.required, FormValidation.jobids]}/>

这些是我的 .ts 文件中的相关导出函数：

export class FormValidation {
        public static required = (value: string) => value ? undefined : 'Required';
}

但是，对于我的项目，显示的是错误方块而不是感叹号。我已经在 Chrome、Firefox 和 Safari 中对其进行了测试。这发生在我的电脑和一些同事的电脑上，我们都使用 Mac OS。但是，对于我的一位同事，感叹号正确呈现，他使用的是 Windows。知道是什么原因造成的以及如何解决吗？提前致谢。

【问题讨论】：

你能用任何与你的问题相关的代码来更新你的问题吗？
@ellitt 我刚刚更新了它。
如果您使用不同的浏览器，它的呈现方式会有所不同吗？
该同事是否使用了不同的操作系统，或者会使其运行的环境与您使用的环境不同的东西？
@ellitt 我更新了我的帖子以解决您的所有问题

标签： reactjs react-redux redux-form

【解决方案1】：

FontAwesome 似乎没有加载，因此图标没有出现，因为它不知道如何呈现该字形。

据我所知，FontAwesome 不是 redux 表单的依赖项，因此您必须尝试将其手动包含在项目中的某个位置，例如 index.html，如下所示：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />

它可以在 Redux Form 文档站点上使用，因为它们在文档的 head 标签中包含了一个链接，该链接从上面那个 sn-p 中的同一个 CDN 加载了很棒的字体。

至于为什么它会出现在你同事的 windows 机器上，我真的不确定。我想如果他在本地安装了 FontAwesome 作为字体，它可能会使用它并能够正确呈现字形。

【讨论】：

很高兴为您提供帮助！如果这解决了问题，请接受此答案，以便将来对其他人有所帮助。