Question

下面的代码显示了2个应将组件呈现到屏幕上的功能。当我通过数组映射时，组件将呈现。问题是当我尝试通过数组中的对象内的数组进行映射时，组件将无法渲染。

所以让我们想象一下，我们有这个数据集：

const categories = [
  {
    title: "Burgers",
    items: [
      {
        item_number: 0,
        name: "Cheese Burgers"
      },
      {
        item_number: 1,
        name: "Double Cheese Burgers"
      },
      {
        item_number: 2,
        name: "Triple Cheese Burgers"
      }
    ]
  }
];

然后我们有了这个渲染功能：

 render() {
    const { backgroundImage, menuIndex } = this.props.screenProps;

    return (
      <View>
        {/*THIS DOES RENDER*/}
        {categories ? (
          categories.map((category, i) => (
            <Card key={i} image={backgroundImage}>
              <Text style={{ marginBottom: 10 }}>{category.title}</Text>
            </Card>
          ))
        ) : (
          <ActivityIndicator style={styles.center_screen} />
        )}

        {/*THIS DOES NOT RENDER*/}
        {categories ? (
          categories[menuIndex].items.map((item, i) => {
            <View key={i}>
              {console.warn(item.name)}
              <Text>{item.name}</Text>
            </View>;
          })
        ) : (
          <ActivityIndicator style={styles.center_screen} />
        )}
      </View>
    );
  }
}

从API调用变量“类别”，并且活动指示器显示在路径中。当它不为null时，我可以映射整个数组并显示每个对象的文本。但是，当我尝试在数组对象内的数组中进行映射时，无法将文本呈现到屏幕上。当我将警告记录到屏幕上时，我可以看到“ item.name”，但不能在“文本”组件中看到。

这是怎么回事？为什么？

Answer 1

您在地图内缺少return语句

更改

categories[menuIndex].items.map((item, i) => {
            <View key={i}>

到

categories[menuIndex].items.map((item, i) => {
       return <View key={i}>

当您具有自定义表达式（多行表达式）时，您需要在迭代器内编写一些自定义逻辑，因此要将其包装在花括号{}中，这样，您的地图回调会期望您返回结果。

Demo

Answer 2

{/*THIS DOES NOT RENDER*/}
{categories ? (
  categories[menuIndex].items.map((item, i) => {
    return (
     <View key={i}>
      {console.warn(item.name)}
      <Text>{item.name}</Text>
    </View>
    );
  })
)

您是否尝试过返回return您的视图？

我如何在React Native中的数组对象中渲染数组

2 个答案: