Question

我有一个简单的组件来显示无效的表单条目，显然只应在所述表单条目无效时呈现消息。据我所知，我正确使用了条件返回语句，但我仍然收到错误。

这是组件：

导入来自＆＃39;的反应＆＃39 ;; 从＆＃39; prop-types＆＃39;;

导入PropTypes

function FormErrors ({formErrors}) {
    Object.keys({formErrors}).map((field, i) => {
        if ({formErrors}[field].length > 0) {
            return (
                <p key={i}>{field} {formErrors[field]}</p>
            )
        } else {
            return null;
        }
    })
}

export default FormErrors;

传入的道具：

formErrors: {email: '', password: ''};

我收到的错误消息：

Invariant Violation: FormErrors(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Answer 1

渲染没有返回任何内容。

您错过了return

function FormErrors ({formErrors}) {
    return Object.keys({formErrors}).map((field, i) => {
    // ^^ add this return
        if ({formErrors}[field].length > 0) {
            return (
                <p key={i}>{field} {formErrors[field]}</p>
            )
        } else {
            return null;
        }
    })
}

React无状态功能组件应返回null但接收错误

1 个答案: