Как динамически назначать значения Prop при создании компонента с помощью array.map ()

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

В вашем случае нужно позаботиться о двух вещах

1. Способ доступа к ключам состояния неправильный.Состояние реакции в основном является объектом, поэтому для доступа к таким ключам вы можете использовать this.state [keyName] вместо точечной нотации

2. Вам также необходимо установить уникальный ключ для элемента TextInput, поскольку он отображается в цикле, иначе вывсегда будет получать один TextInput, отображаемый последним, т. е. Field2.Поскольку у вас нет уникального идентификатора для объекта в массиве, я бы рекомендовал вам использовать индекс в качестве ключа

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

Answer 2

В ES 6 вы можете указать литерал следующим образом:

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