如何使我的 React/Bootstrap 4 验证错误可见？答案

【问题标题】：How do I make my React/Bootstrap 4 validation error visible?如何使我的 React/Bootstrap 4 验证错误可见？
【发布时间】：2020-07-08 19:04:39
【问题描述】：

我正在使用 React 16.13.0 和 Bootstrap 4。我有一个 React 组件 (src/components/Input.jsx)，

import React from 'react';
import {FormControl, FormLabel} from 'react-bootstrap';

const Input = (props) => {
    return (
  <div className="form-group">
      <FormLabel>{props.title}</FormLabel>
      <FormControl
            type={props.type}
            id={props.name}
            name={props.name}
            value={props.value}
            placeholder={props.placeholder}
            onChange={props.handleChange}
          />

      {props.errors && props.errors[props.name] && (
          <FormControl.Feedback>
                 {props.errors[props.name].map((error, index) => ( 
                     <div key={`field-error-${props.name}-${index}`} className="fieldError">{error}</div>
                 ))} 
          </FormControl.Feedback>
      )}
  </div>
    )
}

导出默认输入；

如果它们是从表单提交返回的表单验证错误，我想在其中显示错误消息。

  async handleFormSubmit(e) {
    e.preventDefault();
    const NC = this.state.newCoop;
    delete NC.address.country;

    try {
      const response = await fetch('/coops/',{
        method: "POST",
        body: JSON.stringify(this.state.newCoop),
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
      });
      
      if (response.ok) {
        const result = await response.json();
        console.log('_result_: ', result);
        return result;
      }
      throw await response.json();
    } catch (errors) {
      console.log('_error_: ', errors);
      this.setState({ errors });
    }
  }

但是，当出现错误时，虽然我可以在我的 HTML 中看到带有错误消息的 DIV 存在，但它是不可见的。我错过了什么？我猜 bootstrap 提供了一些让我的元素可见的标准方法。

【问题讨论】：

有在线演示吗？
终于，我有事了。如果您访问prod.chicommons.coop 并输入不完整的美国电话号码，例如“12345”，您将在开发控制台中看到 POST 请求失败，并且您将看到“error: {phone: Array(1), web_site: Array(1)}”控制台消息输出。如果您检查电话号码字段下方，您可以看到错误的 HTML，但它不可见。图我刚刚在引导程序中错误配置了一些东西，但不确定是什么。

标签： reactjs validation bootstrap-4 visible

【解决方案1】：

您似乎错误地设置了错误状态？在您的 cmets 中，服务器返回 "error: {phone: Array(1), web_site: Array(1)}" 并且您正在设置这样的状态 this.setState({ errors })。这样，您的 error 状态仍将是您的初始状态。

尝试类似this.setState({ errors: response.error })

【讨论】：

哦，我对“错误：{phone: Array(1), web_site: Array(1)}”的评论只是意味着 console.log 正在确认服务器返回了一个错误。错误消息 HTML 被添加到有问题的元素下方（检查员确认了这一点），问题是错误消息 HTML 不可见。我对 bootstrap 4 的了解还不够，不知道我还需要做什么才能使消息可见。

【解决方案2】：

要获得可见的错误反馈，请将isInvalid={Boolean(props.errors[props.name])} 设置为FormControl，将type="invalid" 设置为FormControl.Feedback。

考虑解构 props 以简化代码。

【讨论】：

你实际上是想包含一个封闭的括号，不是吗？无论如何，我编辑了我的问题以包含我认为您建议我做的结果（错误，“TypeError：无法读取未定义的属性'名称'”）。让我知道这是否是您的意思。
哎呀，我的意思是要包括封闭的括号。哦，你也需要props.errors && 检查，或者如果可能，使用可选链接。
赢家！真不敢相信原来这么难。