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

Posted 2023-03-14

【中文标题】迭代此数据并呈现节标题和项目的正确方法？

【英文标题】：Correct way to iterate this data and render section headers and items?

【发布时间】：2018-02-26 14:46:25

【问题描述】：

我的 JSON 响应如下所示

我想将名称（即意大利面/比萨）呈现为标题（可以折叠或打开）以及项目，即相应类别中的比萨/意大利面类型。 我正在使用本机反应，我尝试使用地图和 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>
);

【参考方案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>
  )

【讨论】：

我尝试了以下但无法显示。 renderItem() return ( this.props.menu.map(( name, items ) => name items.map(( resp) => resp.title ); ) );