Question

您好，这是我的父组件代码

renderMenu() {
if (this.props.menu) {
  return (
    <List menu={this.props.menu} />
  );
}
}
render() {
  console.log(this.props);
  const { ContainerStyle } = styles;
  return (
    <View style={ContainerStyle}>
      {this.renderRestaurantName()}
        <ScrollView>
        {this.renderSpinner()}
        {this.renderMenu()}
        </ScrollView>
    </View>
);
}

内部列表我返回一个嵌套在地图中的视图 List.js =＆gt;

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

即使我可以使用console.log查看内容，屏幕上也不会显示任何内容。我在这做错了什么？我还应该使用其他东西来解析JSON吗？

这也是JSON数据

我正确解析它吗？

Answer 1

如果菜单的数据结构与此类似：

＆＃13;

const menu = [
  { name: 'name 1', items: [{ title: 't1' }, { title: 't2' }] },
  { name: 'name 2', items: [{ title: 't1' }, { title: 't2' }] },
  { name: 'name 3', items: [{ title: 't1' }, { title: 't2' }] },
  ];

You could do something like this to render nested objects:

const menuListComponent = () => (
  <View>
    {
      this.props.menu.map(menuItem => (
        <View key={menuItem.name}>
          <Text>{menuItem.name}</Text>
          {
            menuItem.items.map(item => (
              <View key={item.title}>
                <Text>{item.title}</Text>
              </View>
            ))
          }
        </View>
      ))
    }
  </View>
);

＆＃13;

请确保使用正确的键值。

注意：
这不是React-Native中最有效的方法。最初渲染整个列表需要时间和内存如果您有长列表或更复杂的数据，FlatList应该是更好的选择https://facebook.github.io/react-native/docs/flatlist.html

Answer 2

显示列表的最佳方法是使用FlatList Read docs

你可以这样使用它：

render(){
    return(
        <FlatList
              data={this.props.menu}
              renderItem={({item})=>this._renderListMenu(item)}
              keyExtractor={(item,index)=>index}
         />
    )
}

 _renderListMenu(item){
    return <MyMenu Menu={item} />
}

在其他课程（MyMenu）中：

export default class MyMenu extends Component{
render(){
    const {name , items } = this.props.Menu;
    return(
        <View>
            <Text>{name}</Text>
            <FlatList
              data={items}
              renderItem={({item})=>this._renderListItem(item)}
              keyExtractor={(item,index)=>index}
            />
        </View>
    )
}
_renderListItem(item){
     return <MyItem item={item}/>
}
}

你创建了MyItem类，就像上面的例子一样

Answer 3

您正在从函数返回结果数组，同时从嵌套地图主体返回视图但忘记返回第一个地图主体内部。

像这样写：

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

或删除{}并使用()：

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

另一个问题是，你要返回多个孩子，所以把地图部分放在视图中。

返回地图内的嵌套视图

3 个答案: