如何在 DropDownPicker 中動態添加值 React Native

Question

在 DropDownPicker 中，我試圖動態添加地圖，但語法失敗。 需要語法方面的幫助，因為它在我看來在邏輯上是正確的。 我能夠為 Picker 找到循環示例，但不能為 DropDownPicker 找到循環示例

<View>
<DropDownPicker
          items={[
            mealItems.map((option) =>(
             {
              label: {option.name}, // Getting error here
              value:{option.id},
              icon: () => (                  
                <View style={styles.arrowAdd}>
                  <FoodPlus />
                </View>
              ),
            }, //Getting error here to remove the comma but that's required 
            )
            )
          ]
          }
//Dropdown attributes such as  style etc
/>
      </View>

我試圖循環的響應數據如下所示：

[{"id": 1, "name": "Breakfast"}, {"id": 2, "name": "Morning Snack"}, {"id": 3, "name": "Lunch"}, {"id": 4, "name": "Evening Snack"}, {"id": 5, "name": "Dinner"}] 

Answer 1

您正在混淆需要 JSX 語法和常規 Javascript 語法的地方。 最大的問題是地圖函數的返回值。 您不需要在值周圍使用{} ，因為您應該使用 JavaScript 對象表示法。

解決問題后，它應該是這樣的。

<View>
  <DropDownPicker
    items={mealItems.map((option) => ({
      label: option.name,
      value: option.id,
      icon: () => (
        <View style={styles.arrowAdd}>
          <FoodPlus />
        </View>
      ),
    }))}
  />
</View>