嵌套地图函数 React Native 中的错误

Question

我无法使用下面的代码获得两个嵌套地图 [Error: Text strings must be rendered within a <Text> component.]

const MyScreen = ({ route, navigation }) => {
const { fieldsBlock } = route.params;
// Iterate
const fieldItems = fieldsBlock.map((fieldBlock) => (
    <View>
      <Text>{fieldBlock.title}</Text>
      {fieldBlock.fields.map((field) => (
        <Text>{field.fieldValue}</Text>
      ))}
    </View>
  )
);
return (
  <View>
    {fieldItems}
  </View>
);

};

只有当我使用一个 map 函数时它才能工作，但使用嵌套 map 函数时它会出错。

Answer 1

我认为，问题是如果 fieldItems 导致一个空数组，您将尝试在视图标签之间不渲染任何内容。

我建议更改代码以在数组为空时呈现 null，就像这样

const MyScreen = ({ route, navigation }) => {
  const { fieldsBlock } = route.params;
  // Iterate
  const fieldItems = fieldsBlock.map((fieldBlock) => (
      <View>
        <Text>{fieldBlock.title}</Text> // <-- NOTE: because of this, view is not empty
        {(fieldBlock && fieldBlock.fields && fieldBlock.fields.length)
           ? fieldBlock.fields.map((field) => (
                <Text>{field.fieldValue}</Text>
             ))
           : null
        }
      </View>
    )
  );
  return (
    {fieldItems && fieldItems.length)
      ? <View>{fieldItems}</View> : null // <-- NOTE: In this case avoid render a view without children
    }
  );
};

可以这样渲染：

<View />

但不是这个：

<View>
</View>

干杯！

嵌套地图函数 React Native 中的错误

Error in Nested map function React Native

nested-loops

react-native