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

Question

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

组件如下:

从“ react ”中导入 react ； 从“prop-types”导入 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;

传入的 Prop :

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

我收到的错误消息:

不变违规:FormErrors(...):渲染没有返回任何内容。这通常意味着缺少返回语句。或者，要不渲染任何内容，请返回 null。

Answer 1

Nothing was returned from render.

您缺少一个返回

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;
        }
    })
}