首页 文章

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

提问于
浏览 次
1

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

这是组件：

从'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;

传入的道具：

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.

javascript reactjs

1 回答

  • 6

    渲染没有返回任何内容 .

    你错过了 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;
        }
    })
}
    回复于

相关问题