For循环 - 如何引用状态中的对象？答案

【问题标题】：For loop - how to reference objects in state?For循环 - 如何引用状态中的对象？
【发布时间】：2019-06-05 14:14:51
【问题描述】：

作为 React.js 的初学者，我在下面有一个 for 循环，它循环遍历状态中的所有表单元素，并相应地输出 JSX 组件以进行渲染。目前我的表单中只有 2 个元素。如果我通过this.state.form.username.placeHolder 直接访问它们，我就可以访问该值。但是，当我使用 for 循环并为每个“组件”使用时，component.placeHolder 是undefined。

如果有人能告诉我我做错了什么，我将不胜感激。

尝试将控制台日志放在各处。看来它只是不喜欢component.placeHolder 的语法。

import React, {Component} from 'react';
import classes from './SignInUpForm.module.css';
import Input from './Input/Input';
import Icon from '../../Assets/Icons/icon1.svg';

class SignInUpForm extends Component{

    state={
        form:{
            username:
            {placeHolder: "Username",
            type: "text",
            icon: {Icon},
            validation:{
                required: true,
            },
            valid: false},

            password:
            {placeHolder: "Password",
            type: "text",
            icon: {Icon},
            validation:{
                required: true,
            },
            valid: false}
        }
    }



render(){

    const formArray = [];

    for (let component in this.state.form){
        console.log(this.state.form);
        console.log(component);
        console.log(component.placeholder);
        console.log(component.icon);
        formArray.push(

            <Input key = {component} name = {component} placeholder={component.placeHolder} icon ={component.icon}/>

            );


    }



    return(
            <React.Fragment>
            <div className={classes.SignInUpForm}>
            {formArray}
            </div>

            </React.Fragment>
    );
}

}
export default SignInUpForm;


placeholder={component.placeHolder} icon ={component.icon} are undefined. They should not be.

【问题讨论】：

标签： javascript reactjs for-loop state

【解决方案1】：

state.form 在对象而不是数组中。因此，当您使用 for-in 迭代对象时，您将获得密钥。在您的 component 变量中表示“用户名”和“密码”。

要实现你想要的，你可以this.state.form[component]。

let state = {
  form: {
    username: {
      placeHolder: "Username",
      type: "text",
      icon: "foo",
      validation: {
        required: true,
      },
      valid: false
    },

    password: {
      placeHolder: "Password",
      type: "text",
      icon: "foo",
      validation: {
        required: true,
      },
      valid: false
    }
  }
};


for (let component in state.form) {
  console.log(state.form[component].placeHolder);
  console.log(state.form[component].icon);
}

另外，您的代码中存在输入错误。在您拥有placeHolder（camelCase）的状态下，但您以placeholder（小写）的身份访问它

【讨论】：

【解决方案2】：

根据MDN Doc：

for...in 语句遍历所有可枚举的 properties 对象。

这意味着component 变量将具有对象的属性而不是值。要访问这些值，您需要使用this.state.form[component].placeholder。

for (let component in this.state.form){
  console.log('component', component);
  console.log('values', this.state.form[component].placeholder);
}

为避免混淆，最好使用key 而不是组件。

检查这个例子：

let obj = { a:1, b: 2 };

for(let key in obj) {
  console.log('key value => ', key, obj[key]);
}

【讨论】：

【解决方案3】：

尝试使用它，它也会使您的代码更清晰：

const formFieldNames = Object.keys(this.state.form);

const formArray = formFieldNames.map(fieldName => {
   const field = formFieldNames[fieldName];
   return <Input key={fieldName} placeholder={field.placeholder} icon={field.icon}/>
});

另外，我会将您的表单字段建模为数组。

您可能想使用：https://redux-form.com/8.2.2/，它会让您的生活更轻松。

【讨论】：