用array.map()创建组件时，如何动态分配prop值

Question

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

有没有办法在下面完成此示例？我可以以某种方式逃脱参数或双括号吗？

// 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状态基本上是一个对象，因此可以访问此类密钥，您可以使用此键。

2. 您还需要将唯一的键设置为TextInput元素，因为它是在循环中渲染的，否则您将始终获得一个textInput渲染的最后一个，即field2。由于您在数组中没有每个对象的唯一ID，我建议您将索引用作键

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