Javascript 我能'；t在react中的嵌套对象上执行映射函数

我对React还不熟悉，并尝试了一些用例来提高我对React的了解。 我似乎无法使map函数在嵌套对象上工作

我想做的是将当前对象传递给子组件，并在那里使用它进行显示。所以我想做两个div，一个是贷方，一个是借方。我的思考过程是，我认为我可以在这里创建一个初始对象，将特定对象传递给组件并显示它

以下是我的代码：

const [InputFields, setInputFields] = useState([
{
   credit: {
       minimumBalance: '',
       maximumBalance: '',
       interestRate: '',
   }
   debit: {
       minimumBalance: '',
       maximumBalance: '',
       interestRate: '',
   }
}]);

console.log(InputFields.credit) //result will get undefined


return(
   <Fragment>
     <div>
       {InputFields.credit.map((inputField, index) => {
         return(
           <EditInterestRate key={index} inputFields={inputField.debit} />
         );
       })}
     </div>
   </Fragment>
);

const[InputFields，setInputFields]=useState([
{
学分：{
最小平衡：''，
最大平衡：''，
利率：''，
}
借方：{
最小平衡：''，
最大平衡：''，
利率：''，
}
}]);
console.log（InputFields.credit）//结果将未定义
返回(
{InputFields.credit.map（（inputField，index）=>{
返回(
);
})}
);

您有一个对象数组，因此

console.log（InputFields.credit）

将无法工作，因为您试图直接引用一个属性，该属性不是在整个数组中定义的，而是在数组的每个元素中定义的。

console.log（输入字段[0].credit）

这是正确的方法。因此，您需要循环输入InputField，然后使用map获取单个字段，然后引用贷记和借记属性

InputField.map((inputField,index)=>{
    return(
           <EditInterestRate key={index} inputFields={inputField.debit} />
     );
})

InputField.map（（InputField，index）=>{
返回(
);
})

---

上面几行。在您的代码中，您试图访问

贷记

属性中的

借记

属性，而这两个属性都作为单个属性存在。

您有一个对象数组，因此

控制台.log（InputFields.credit）

将不起作用，因为您试图直接引用一个属性，该属性不是在整个数组中定义的，而是在数组的每个元素中定义的。

InputField.map((inputField,index)=>{
    return(
           <EditInterestRate key={index} inputFields={inputField.debit} />
     );
})

console.log（输入字段[0].credit）

这是正确的方法。因此，您需要循环输入InputField，然后使用map获取单个字段，然后引用贷记和借记属性

InputField.map((inputField,index)=>{
    return(
           <EditInterestRate key={index} inputFields={inputField.debit} />
     );
})

InputField.map（（InputField，index）=>{
返回(
);
})

---

上面几行。在代码中，您试图访问

借记

属性和

贷记

属性中的

借记

属性，而这两个属性都作为单个属性存在。

在代码中，

控制台.log（InputFields.credit）

是

未定义的

，因为，

输入字段

被初始化为数组。根据您的代码，如果要获取数据，则代码应为：

InputField.map((inputField,index)=>{
    return(
           <EditInterestRate key={index} inputFields={inputField.debit} />
     );
})

console.log(InputFields[0].credit)

现在，如果使用

映射

方法：

---

只能对数组而不是对象应用javascript

map

函数。在代码段中，您试图映射

InputFields.credit

，它是一个对象，而不是数组。这就是您得到错误的原因。

在代码中，

console.log（InputFields.credit）

是未定义的，因为，

InputFields

被初始化为数组。根据您的代码，如果要获取数据，则代码应为：

console.log(InputFields[0].credit)

现在，如果使用

映射

方法：

---

只能对数组而不是对象应用javascript

map

函数。在代码段中，您试图映射

InputFields.credit

，它是一个对象，而不是数组。这就是为什么您会出现错误。

第一件事是您在结束信用卡的花括号后忘记添加逗号。

const[InputFields，setInputFields]=useState（[{贷方：{minimumBalance:''，maximumBalance:''，interestRate:''，}，借方：{minimumBalance:''，maximumBalance:''，interestRate:''，}]）

第二件事，您必须执行console.log（InputFields[0].credit.minimumBalance）才能在控制台中记录某些内容。
第一件事是在关闭信用的花括号后忘记添加逗号。
const[InputFields，setInputFields]=useState（[{贷方：{minimumBalance:''，maximumBalance:''，interestRate:''，}，借方：{minimumBalance:''，maximumBalance:''，interestRate:''，}]）

第二件事，您必须执行console.log（InputFields[0].credit.minimumBalance）才能在控制台中记录一些内容