Question

我从我的API中获取了组，我可以看到它们来到UI和道具，但不知何故显示组的名称没有发生。

这是我映射的方式：

<List>
    {this.props.groups && this.props.groups.map((g) =>
    <ListItem key={g.Id} primaryText={g.Name} onClick={this.handleClickItem(g)} />) }

    {(!this.props.groups || this.props.groups.length === 0) && "No groups found."}
</List>

redux devtools showing the data showing the props hold the data

Answer 1

我看到了小名字＆＃39; name＆＃39;属性：它应该＆＃39; g.name＆＃39;不是＆＃39; g.Name＆＃39;

Answer 2

查看props的输出，groups对象中的键是小写的。 g.name而非g.Name，您收到的错误是由于区分大小写。另外onClick要求你传递一个函数，没有箭头函数，当React渲染组件时会调用handleClickItem函数。

您的ListItem组件应为：

<ListItem 
  key={g.id}
  primaryText={g.name}
  onClick={ () => this.handleClickItem(g) } 
/>

Answer 3

我相信您正在映射数组数组，这就是您无法按键访问元素的原因。

Answer 4

这是一个区分大小写的问题，因为我导入了类型而不是模型，所以g.name现在可以使用了。

使用道具进行映射

4 个答案: