Reactjs 将逗号添加到单个字符串中

我正在使用react应用程序。我从中提取了一个数据。在该api中，成分在一个字符串中，但除以

\n1

。当我获取数据时，它是这样一个字符串，

\n1

显示为

（，divided）

。我想把配料放在

ulli

元素或

comma-a

每个配料后面。我尝试了很多方法来分割数据，还尝试在每个单词后添加一个逗号，但都不起作用。我在中共享了我的代码

这是我的代码

import React, { useEffect } from "react";
import "./styles.css";

export default function App() {
  const [state, setState] = React.useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const response = await fetch("https://sampleapis.com/recipes/api/recipes");
    const data = await response.json();

    setState(data);
  };
  return (
    <div className="App">
      {state.map((recipe) => {
        return (
          <>
            <div key={recipe.id}>
              <h1>{recipe.title}</h1>
              <p>{recipe.ingredients}</p>
            </div>
          </>
        );
      })}
    </div>
  );
}

import React，{useffect}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[state，setState]=React.useState（[]）；
useffect（（）=>{
fetchData（）；
}, []);
const fetchData=async（）=>{
const response=等待获取（“https://sampleapis.com/recipes/api/recipes");
const data=wait response.json（）；
设置状态（数据）；
};
返回(
{state.map（（配方）=>{
返回(
{recipe.title}
{配方.配料}

);
})}
);
}

尝试将它们拆分并映射到单独的html元素中

 <div className="App">
      {state.map((recipe) => {
        return (
          <div key={recipe.id}>
            <h1>{recipe.title}</h1>
            <div>{recipe.ingredients?.split("\n").map(ingre=><p>{ingre}</p>)}</div>
          </div>
        );
      })}
    </div>

{state.map（（配方）=>{
返回(
{recipe.title}
{recipe.components？.split（“\n”）.map（ingre=>{ingre}
）}
);
})}

我找到了解决方案，并这样做：

const ingre=newRecipe.components//这是数据
var result=ingre.split（'，'）
.map（word=>`${word.trim（）}`）
。加入（‘，’）我从的问题中找到了我的解决方案。我编辑了答案，并在您提供的沙箱@krisna中进行了尝试