React Native如何将API返回数组渲染为换行列表而非逗号分隔文本？

问题原因 #

你当前把Python返回的数组通过${data.best_food}转换成了字符串，JavaScript数组默认的toString()方法会用逗号拼接元素，所以出现了逗号分隔的输出。要实现换行展示，需要调整数据处理和渲染逻辑。

方案一：用换行符拼接字符串（快速实现） #

修改Axios请求处理代码 #

const handleSubmit = (e) => {
    e.preventDefault();
    const params = {
      type,
      pref,
      age,
      time,
    };

    axios
      .post("http://0.0.0.0:8080/foodsuggest", params)
      .then((res) => {
        const data = res.data.data;
        let msg;
        // 判断返回的是数组还是错误字符串
        if (Array.isArray(data.best_food)) {
          // 把数组元素用换行符连接，同时处理驼峰转空格（比如IceCream→Ice Cream）
          msg = data.best_food.map(food => 
            food.replace(/([a-z])([A-Z])/g, '$1 $2')
          ).join('\n');
        } else {
          msg = data.best_food;
        }
        setMsg(msg);
      })
      .catch((error) => alert(`Error: ${error.message}`));
  };

展示代码无需修改 #

原来的<Text>组件会自动识别字符串中的\n并换行：

<View style={styles.textContainer}>
    <Text style={styles.smallText2}>{msg}</Text>
</View>

方案二：用列表渲染（更灵活，适合自定义样式） #

这种方式适合后续需要给每个列表项添加点击事件、自定义间距等场景。

修改状态与请求处理 #

// 初始化状态为数组类型
const [foodList, setFoodList] = useState([]);

const handleSubmit = (e) => {
    e.preventDefault();
    const params = {
      type,
      pref,
      age,
      time,
    };

    axios
      .post("http://0.0.0.0:8080/foodsuggest", params)
      .then((res) => {
        const data = res.data.data;
        // 直接存储原始返回值（数组或错误字符串）
        setFoodList(data.best_food);
      })
      .catch((error) => alert(`Error: ${error.message}`));
  };

修改展示代码 #

<View style={styles.textContainer}>
  {/* 判断是否为数组，分别处理列表和错误信息 */}
  {Array.isArray(foodList) ? (
    foodList.map((food, index) => (
      <Text key={index} style={styles.smallText2}>
        {/* 驼峰转空格，不需要可删除该replace */}
        {food.replace(/([a-z])([A-Z])/g, '$1 $2')}
      </Text>
    ))
  ) : (
    <Text style={styles.smallText2}>{foodList}</Text>
  )}
</View>

额外说明 #

• 如果不需要把IceCream转为Ice Cream，直接去掉代码中的.replace(/([a-z])([A-Z])/g, '$1 $2')即可。
• 注意Python接口在错误场景返回的是字符串，所以必须添加类型判断，避免渲染出错。

内容的提问来源于stack exchange，提问作者BB5575