时间戳

首页 > 解决方案 > 嵌套地图函数 React Native 中的错误

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

问题描述

我无法使用我得到的以下代码来拥有两个嵌套地图[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 函数会出错。

标签： react-nativenested-loops

解决方案

我认为，问题在于如果fieldItems结果为空数组，您将尝试在 View 标记之间不渲染任何内容。

如果数组为空，我建议更改代码以呈现 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>

干杯!

推荐阅读