Question

React的新功能，遵循在线教程。导师最初写了这段代码：

<Picker selectedValue={this.props.day}>
  <Picker.item label='Monday' value='Monday' />
  <Picker.item label='Tuesday' value='Tuesday' />
  <Picker.item label='Wednesday' value='Wednesday' />
  <Picker.item label='Thursday' value='Thursday' />
  <Picker.item label='Friday' value='Friday' />
  <Picker.item label='Saturday' value='Saturday' />
  <Picker.item label='Sunday' value='Sunday' />
</Picker>

写得非常好。

话虽如此，这是一个丑陋的代码。我认为从数组中映射它会更清晰，如下所示：

renderPickerItems() {
    return ['Monday', 'Tuesday', 'Wednesday',
            'Thursday', 'Friday', 'Saturday', 'Sunday'].map(day =>
        <Picker.item label={day} value={day} />
    );
}

所以，我写了这个函数并用这个替换了第一个代码块：

<Picker selectedValue={this.props.day}>
  {this.renderPickerItems()}
</Picker>

然而，这不起作用。

我收到了错误：

Unhandled JS Exception: TypeError: Cannot read property 'displayName' of undefined

我尝试将该方法的返回打印到控制台，我实际上已经传入了正确的道具的React Native对象，所以我不确定它为什么会失败。

我想要完成的事情似乎非常微不足道，我似乎找不到任何有类似问题的人。

我在React Native版本0.51.0上。

提前谢谢。

Answer 1

好的，所以答案是我在遵循指示时非常糟糕。

正确的语法是Picker.Item而不是Picker.item。

将数组值映射到PickerItem：＆＃34;无法读取属性＆＃39; displayName＆＃39;未定义＆＃34;

1 个答案: