javascript - 当值为 true 时显示选取器项目 React Native

Question

我有一个使用 'react-native' 中的 Picker 的组件，并且在 props 中我收到 bool 值 showDefaultPickerItem 来显示或隐藏Picker.Item。问题是这样做不起作用，我收到错误

null is not an object evaluating child props

可以肯定列表的长度大于1。

function PickerComponent(props){
  const { selectedValue, onValueChange, list, label, valuekey, showDefaultPickerItem } = props;
  return (
    <Picker
      selectedValue={selectedValue}
      onValueChange={(value) => onValueChange(value)}
    >
      {showDefaultPickerItem &&
        <Picker.Item label={"Select"} value={undefined} color ={gray}/>    
      }
      {list.map(l => {
          return <Picker.Item key={l[valuekey]} label={l[label]} value={l[valuekey]} />
        })
      }
    </Picker>              
  )
}

Answer 1

我认为这段代码对你有帮助。

function make_list(list, showDefaultPickerItem, valuekey, label) {
  let listMap = list.map(l => <Picker.Item key={l[valuekey]} label={l[label]} value={l[valuekey]} />);
  if (showDefaultPickerItem) {
    listMap.unshift(<Picker.Item key="_default" label={"Select"} value={undefined} color={'gray'} />);
  }
  return listMap;
}
function PickerComponent(props){
  const { selectedValue, onValueChange, list, label, valuekey, showDefaultPickerItem } = props;
  return (
    <Picker
      selectedValue={selectedValue}
      onValueChange={(value) => onValueChange(value)}
    >
      {make_list(list, showDefaultPickerItem, valuekey, label)}
    </Picker>              
  )
}