Question

我正在使用React应用。我从open api获取了一个数据。在该api中，成分在一个字符串中，但除以\n1。当我获取数据时，它像是一个字符串，而\n1显示为(, divided)。我想将成分放入每个成分之后的ul li元素或comma-a中。我尝试了多种方法来拆分数据，并尝试在每个单词后添加一个逗号，但是它不起作用。我在codesandbox中共享了代码。

这是我的代码

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>
  );
}

Answer 1

尝试将它们拆分并映射到单独的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>

Answer 2

我找到了解决方案并做到了这一点：

const ingre = newRecipe.ingredients // this is the data
  var result = ingre.split(',')
    .map(word => `${word.trim()}`)
    .join(', ');

React添加逗号一个字符串

2 个答案: