Reactjs 如何在DropDownPicker中动态添加值

在DropDownPicker中，我试图动态添加map，这在语法上是失败的需要语法方面的帮助，因为我觉得语法在逻辑上是正确的。我能够找到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>

---

您将需要JSX语法的地方与常规Javascript语法的地方混为一谈。最大的问题是map函数返回值。您不需要在值周围使用

{}

，因为您应该使用JavaScript对象表示法

解决问题后，应该是这样的

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

({
标签：option.name，
值：option.id，
图标：（）=>(
),
}))}
/>

嗨！它说名称不存在于与相同的“从不”类型上id@Sakshi您正在使用TypeScript吗？是的，正在使用tsx文件类型看起来

mealItems

不是强类型，因此编译器不知道

选项的类型是什么。然后它会给您一个警告，因为它可能不存在并且可能导致错误。强键入
mealItems
数组，以便可以推断
option
的类型，或者将
option
标记为
any
类型，即
mealItems.map（（option:any）=>（{
<View>
  <DropDownPicker
    items={mealItems.map((option) => ({
      label: option.name,
      value: option.id,
      icon: () => (
        <View style={styles.arrowAdd}>
          <FoodPlus />
        </View>
      ),
    }))}
  />
</View>