在React Native中渲染逗号分隔的值字符串

问题描述

我正在从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>
 ))}

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

解决方法

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(',\n"}</Text>)}
</Text>

,

乍一看，这似乎已经接近您的期望 这样，您可以根据需要为视图提供边距。

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

         {step}
      </Text>
  </View>
 ))}