使用键值对在React Native中填充Picker时，“未定义不是'this2.props.options [key]'上的对象”

Question

I am trying to populate a picker with a set of data from a key-value pair.

    const options = {
      inch: 0.0254,
      foot: 0.3048,
      yard: 0.9144,
      mile: 1609.34
    };
return (
      <View>
        <Picker
          mode="dropdown"
          selectedValue={this.state.fromUnit}
          onValueChange={(unit, value) => this.setState({ fromUnit: value })}
        >
          {Object.keys(options).map(key => {
            return (
              <Picker.Item
                label={this.props.options[key]}
                value={key}
                key={key}
              />
            );
          })}
        </Picker>

Upon running my code, I get the following:

TypeError: undefined is not an object (evaluating '_this2.props.options[key]')

I have tried adding options[] to state, but that didn't seem to make any difference.

Not sure what is going on here, it looks pretty straight forward to me. It seems that it's getting caught up on the 'key' part of the mapping but I am unsure why. any advice would be appreciated

Answer 1

You can try this

    const options = [
      {name: inch,  value: 0.0254},
      {name: foot, value: 0.3048},
      {name: yard, value: 0.9144},
      {name: mile, value: 1609.34}
    ];

         {options.map((options, key) => {
            return (
              <Picker.Item
                label={options.name}
                value={options.value}
                key={key}
              />
            );
          })}