Question

在 React Native 中，使用 Map 对象生成 Picker.Item 实例会触发“TypeError：undefined 不是对象”

2018-07-25

1060

android react-native picker

我的代码基于此 Stack Overflow 上的以下问题： React Native 将状态中的数组值应用为 Picker 项目

我使用了 Manjeet Singh 的第一个解决方案（用于将对象映射到 Picker.Item 实例），因为我将数据存储在对象中。

但是，当我使用他的方法时，出现了“TypeError：undefined 不是对象（评估‘child.props.value’）”错误。

我的代码如下所示：

class View extends React.Component{
  state = { exercise: '' };
  arrItems = {"Badminton":"7", "Basketball":"9.3", "Biking":"8"};
  render(){
    <Picker selectedValue={this.state.exercise} 
            onValueChange={(itemValue, itemIndex)=>this.setState({ exercise: itemValue })>
       {Object.keys(this.arrItems).map((key) => {
        return (<Picker.Item label={key} value={key} key={key}/>)
      })}  
     }
    </Picker>
  }

我对 React Native 还很陌生 - 是什么问题导致了此错误？

Answer 1

一些小提示：

尝试将变量设置为本地状态 (this.state)，目前我认为您无法访问变量。您在构造函数中设置状态，构造函数（如下所示）和 super() 行是必需的。
您在 onValueChange 属性末尾缺少结束标记。
{ return(statement) } 等于 (statement) ，这仅在单行时有效。
您也可以使用 .map((item, index) => 来获取项目的索引，以便您可以将其用作项目中的关键属性。

试试这个：

class View extends React.Component {
  constructor() {
    super();

    this.state = {
      exercise: '',
      arrItems: { "Badminton": "7", "Basketball": "9.3", "Biking": "8" }
    }
  }

  render() {
    return (
        <Picker selectedValue={this.state.exercise}
          onValueChange={(itemValue, itemIndex) => this.setState({ exercise: itemValue })}>
          {Object.keys(this.state.arrItems).map((key, index) =>
            <Picker.Item label={key} value={key} key={index} />
          )}
        </Picker>
    )
  }
}

此外，您可能希望将您的 Class 重命名为不同于 View 的名称，因为您可能会经常使用内置 View（只能有一个）。