如何在使用array.map（）创建组件时动态分配Prop值

Question

我正在努力使我的React-Native更具动态性，并通过映射数组来构建组件。我试图动态分配道具值，因为它们已经在括号内。

有没有办法在下面完成这个例子？我可以以某种方式逃避参数或双重支持我需要的值吗？

// Sample array
fieldArray = [
  {"DefaultValue": "ABCDEF",
   "Name": "Field1"},
  {"DefaultValue": "123456",
   "Name": "Field2"}
]

// Old way having static defined components
<TextInput
  value={this.state.Field1}
  onChangeText={() => {}}
 />
 <TextInput
  value={this.state.Field2}
  onChangeText={() => {}}
 />

我想做的是：

 {fieldArray.map((x) => 
   <TextInput
    value={this.state.{x.Name}}     // <-- This is where I am stuck, can I double bracket in a .map()??
    onChangeText={() => {}}
   /> 
 )}

Answer 1

在ES 6中，您可以像这样指定文字：

{fieldArray.map((x) => 
  <TextInput
value={this.state[x.Name]}     // <-- This is how you do it
in a .map()??
onChangeText={() => {}}
 /> 
)}

Answer 2

在您的情况下，您需要注意两件事

1. 您访问状态键的方式不正确。 React状态基本上是一个对象，因此要访问这些键，您可以使用this.state [keyName]而不是点表示法
2. 您还需要为TextInput元素设置唯一键，因为它在循环中呈现，否则您将始终获得一个TextInput呈现最后一个I.e.，Field2。由于数组中每个对象没有唯一的id，我建议你使用index作为键

    {fieldArray.map((x, index) => 
        <TextInput
             key={"Key-"+index}
             value={this.state[x.Name]} 
              onChangeText={() => {}}
        /> 
     )}