Javascript For循环-如何引用处于状态的对象？

作为React.js的初学者，我在下面有一个for循环，循环遍历状态中的所有表单元素，并相应地输出要呈现的JSX组件。目前我的表格中只有两个元素。如果我直接通过

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.

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

import React，{Component}来自'React'；
从“/SignInUpForm.module.css”导入类；
从“./Input/Input”导入输入；
从“../../Assets/Icons/icon1.svg”导入图标；
类符号形式扩展组件{
陈述={
表格：{
用户名：
{占位符：“用户名”，
键入：“文本”，
图标：{icon}，
验证：{
要求：正确，
},
有效：false}，
密码：
{占位符：“密码”，
键入：“文本”，
图标：{icon}，
验证：{
要求：正确，
},
有效：false}
}
}
render（）{
常数形式=[]；
for（让组件处于这个.state.form中）{
log（this.state.form）；
控制台日志（组件）；
console.log（component.placeholder）；
console.log（component.icon）；
正推(
);
}
返回(
{formArray}
);
}
}
导出默认符号格式；
占位符={component.placeholder}图标={component.icon}未定义。他们不应该这样。

根据：

for…in语句对一个函数的所有可枚举属性进行迭代 反对

这意味着

组件

变量将具有对象的属性，而不是值。要访问这些值，您需要使用

this.state.form[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.

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

为了避免混淆，最好使用

键

而不是组件

检查此示例：

let obj={a:1，b:2}；
用于（输入obj）{
log（'key-value=>'，key，obj[key]）；
}

根据：

for…in语句对一个函数的所有可枚举属性进行迭代 反对

这意味着

组件

变量将具有对象的属性，而不是值。要访问这些值，您需要使用

this.state.form[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.

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

为了避免混淆，最好使用

键

而不是组件

检查此示例：

let obj={a:1，b:2}；
用于（输入obj）{
log（'key-value=>'，key，obj[key]）；
}

状态。在对象而不是数组中形成。因此，当您使用

中的对对象进行迭代时，您将获得密钥。在

组件

变量中表示“用户名”和“密码”

要实现您想要的，您可以执行

this.state.form[component]

let state={
表格：{
用户名：{
占位符：“用户名”，
键入：“文本”，
图标：“foo”，
验证：{
要求：正确，
},
有效：假
},
密码：{
占位符：“密码”，
键入：“文本”，
图标：“foo”，
验证：{
要求：正确，
},
有效：假
}
}
};
for（让组件处于state.form状态）{
console.log（state.form[component].placeHolder）；
console.log（state.form[component].icon）；
}

状态。在对象而不是数组中形成。因此，当您使用

中的对对象进行迭代时，您将获得密钥。在

组件

变量中表示“用户名”和“密码”

要实现您想要的，您可以执行

this.state.form[component]

let state={
表格：{
用户名：{
占位符：“用户名”，
键入：“文本”，
图标：“foo”，
验证：{
要求：正确，
},
有效：假
},
密码：{
占位符：“密码”，
键入：“文本”，
图标：“foo”，
验证：{
要求：正确，
},
有效：假
}
}
};
for（让组件处于state.form状态）{
console.log（state.form[component].placeHolder）；
console.log（state.form[component].icon）；
}

尝试使用此选项，它也会使您的代码更干净：

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

const formFieldNames=Object.keys（this.state.form）；
const formArray=formFieldNames.map（fieldName=>{
const field=formFieldNames[fieldName]；
返回
});

另外，我将把表单字段建模为数组

---

您可能想使用：，它将使您的生活方式更加轻松。

尝试使用它，它也将使您的代码更加干净：

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

const formFieldNames=Object.keys（this.state.form）；
const formArray=formFieldNames.map（fieldName=>{
const field=formFieldNames[fieldName]；
返回
});

另外，我将把表单字段建模为数组

你可能想用：，它会让你的生活更轻松