javascript - 如何在 React 中访问对象中的动态字段？

Question

我已经使用自定义钩子实现了表单验证，它将错误作为对象发送到以下格式的表单中。

errors : {
    userEmail: {
        required: true
    }
}

表单组件如下

import React from 'react';

import { FormInput } from './../FormInput/FormInput.component';
import { useFormValidation } from './../../shared/utils/useFormValidation';
import { Button } from './../Button/Button.component';

import './SignIn.styles.css';

import FormFieldsData from './../../shared/data/form-fields';

const SignIn = () => {

    // FORM INITIAL STATE

    const formInitialState = {
        userEmail: '',
        userPassword: ''
    };

    // SETTING VALIDATION RULES FOR FORM FIELDS

    const fieldValidationRules = {
        userEmail: { required: true, isValidEmail: true },
        userPassword: { required: true}
    };

    // INITIALIZING FORM USING HOOK

    const [
        signInFormState,
        errors,
        isValid,
        handleInputChange,
        handleFormSubmit,
        handleBlur
    ] = useFormValidation(formInitialState, fieldValidationRules);

    console.log(errors.userEmail.required);

    const { userEmail, userPassword } = signInFormState;

    return(
        <div className = 'SignInSection'>

            <h1> Sign In here..!! </h1>

            <form onSubmit = {handleFormSubmit} >

                <FormInput 
                    {...FormFieldsData.userEmail}
                    value = {userEmail} 
                    clicked = {handleInputChange}
                    blur = {handleBlur} />

                    {/* Validation Error Message */}

                    

                <FormInput 
                    {...FormFieldsData.userPassword}
                    value = {userPassword}
                    clicked = {handleInputChange}
                    blur = {handleBlur} />
                
                <Button
                    type = 'submit'
                    btn_label = 'Login'
                    btn_size = 'sm'
                    disabled = {!isValid}
                    btn_bg = '#00ACEE'
                    btn_color = '#FFFFFF' />

                <Button
                    type = 'button'
                    btn_label = 'Cancel'
                    btn_size = 'sm'
                    btn_bg = '#4b4b4b'
                    btn_color = '#FFFFFF' />

            </form>

        </div>
    )
};

export { SignIn }

当尝试从错误对象访问所需字段以实现验证消息时，我收到以下错误。

请指导我如何实现此功能？

;

标签： javascriptarraysreactjsobjectreact-redux