选项列表中的动态数据

Question

在我的 react 本机应用程序中，我正在使用 react-native-modal-dropdown，它运行良好，但问题是我想在选项列表中设置动态数据，它接受一个数组，从我这边返回的数据返回一个具有 ID、名称和颜色的对象，它存储在状态中，我只想取名称并将它们放在选项中，我该怎么做？这是代码：

下拉菜单

<ModalDropdown options={this.state.cars.name}/>

返回的对象

state:{
    Cars:[
    {
     id: 1,
    Name: 'Mercedes',
    Color: 'Red'
    },
    {
     id: 2,
    Name: 'BMW',
    Color: 'Black'
    },
    {
     id: 3,
    Name: 'Toyota',
    Color: 'White'
    },
    ]
}

Answer 1

您想使用.map 将对象数组转换为仅包含汽车名称的字符串数组。

所以做这样的事情应该可以工作

<ModalDropdown options={this.state.cars.map(car => car.Name)}/>

尽管您应该注意您以两种方式引用汽车。确保使用正确的。 cars 或 Cars 取决于您所在州的情况。

let state = {
    Cars:[
    {
     id: 1,
    Name: 'Mercedes',
    Color: 'Red'
    },
    {
     id: 2,
    Name: 'BMW',
    Color: 'Black'
    },
    {
     id: 3,
    Name: 'Toyota',
    Color: 'White'
    },
    ]
}

let carNames = state.Cars.map(car => car.Name);
console.log(carNames)

Answer 2

如果你真的不关心 ID，那么你可以这样做：

    const options = [{id: 1, name: "one"}, {id: 2, name: "two"}, {id: 3, name: "three"}].map(op => op.name);
    <ModalDropdown options={options}/>