在 React Native 中呈现逗号分隔的值字符串

Posted 2023-02-14

【中文标题】在 React Native 中呈现逗号分隔的值字符串

【英文标题】：Rendering a comma separated string of values in React Native

【发布时间】：2021-01-03 06:32:51

【问题描述】：

我正在从 JSON 中提取 item.dosage，它给了我以下字符串

"300gr short pasta, 2 spring onions, 50gr parmesan cheese"

我想在这样的单独文本行中显示以逗号分隔的每种成分

   300gr short pasta
   2 spring onions
   50gr parmesan cheese

我试图在我的 JSX 中执行以下操作

item.dosage.map((step, i) => (
        <Text>
            i > 0 && ", "
               step
        </Text>
 ))

我收到一个关于“未定义不是函数...”的错误。

【问题讨论】：

什么是剂量？它包含什么？

【参考方案1】：

乍一看，它看起来越来越接近你所寻找的 这样你就可以根据需要为视图提供边距..

item.dosage.split(', ').map((step, i) => (
  <View>
      <Text>
        i > 0 && ", "

         step
      </Text>
  </View>
 ))

【讨论】：

您的解决方案似乎不起作用，它仍然显示为没有逗号分隔的完整字符串。

item.dosage 包含什么。？我已经编辑了解决方案

在本帖第一行评论"300gr short pasta, 2 spring onions, 50gr parmesan cheese"

【参考方案2】：

const str = "300gr short pasta, 2 spring onions, 50gr parmesan cheese"

...
<Text>
  str.split(',').map((step)=> <Text>step",\n"</Text>)
</Text>
...

// so try this way
<Text>
 item.dosage.split(',').map((step)=> <Text>step",\n"</Text>)
</Text>

【讨论】：

虽然我需要使用split(", ") 和"\n" 稍微调整代码，但它仍然有效。非常感谢