正确的方法来迭代这些数据并呈现节标题和项目？

Question

我的JSON响应看起来像这个

我想将名称，即意大利面/披萨作为标题（可以折叠或打开）和项目，即相应类别内的披萨/意大利面的类型。我正在使用react native，我尝试使用map和ListView

return (this.props.item.items.map((res) => {
    console.log(res);
    return (
      <View>
          <View style={CardContainer}>
            <Text>{res.title}</Text>
            <Image
            source={{ uri: res.photo }}
            style={imageStyle}
            />
          </View>
      </View>
    );
  })
);

但是它们返回单个物体，因此当我将onPress事件与类别相关联，即面食时，它被注册两次，这是不希望的，因为点击意味着扩展该类别即意大利面。

请告诉我如果我应该更改JSON结构以使其高效，这是菜单卡的JSON响应

编辑：我尝试了以下但无法让它显示结果

renderItem() {
return (
<View>
{
  this.props.menu.map(({ name, items }) => {
      <View>
        <Text>{name}</Text>
      </View>
    items.map((resp) => {
      <View>
        <Text>{resp.title}</Text>
      </View>
    });
  })
}
</View>
);
}

Answer 1

<View>
  {this.props.item.items.map((res) => (
      <View>
        <Header>
          { res.name }
        </Header>
        { res.items.map(item => (
          <View style={CardContainer}>
            <Text>{item.title}</Text>
            <Image
            source={{ uri: item.photo }}
            style={imageStyle}
            />
          </View>
        )}
      </View>
    )))}
</View>

IMO，更具可读性

render() {
  const { item: { items: allItems } } = this.props;
  return (
    <View>
      { allItems.map(({ name, items }) => (
        <Header>{ name }</Header>
        { items.map(({ title, photo }) => (
           <View style={CardContainer}>
             <Text>{title}</Text>
             <Image
               source={{ uri: photo }}
               style={imageStyle}
             />
           </View>
        )}
      )}
    </View>
  )
}