如何重命名数组中的对象？

Question

我正在尝试使用此 API，但是我想通过 strMeasure & 使用 for 循环或映射。字符串成分。目前，这些附件的数量少于 20 个。所以我想我需要先使用 for 循环创建一个数组，然后再实现它？让我知道你的想法..

const [recipeData, setRecipeData] = useState([]);
const ingredientList = recipeData.map((allData) => {
  const arr = [];
  for (let i = 1; i <= 20; i++) {
    arr.push(allData[`strMeasure${i}`] + " " + allData[`strIngredient${i}`]);
  }
  return arr;
});

但随后不知道如何将其注入我的组件中。

干杯!

Answer 1

我建议不要将它们连接到字符串，而是将它们存储为对象中的键值对。这样可以更轻松地访问 UI 中的值。

const allData = {
  strIngredient1: "Beef",
  strIngredient2: "Plain Flour",
  strMeasure1: "1kg",
  strMeasure2: "2 tbs",
  …
};

const items = [];

for (let i = 1; i <= 20; i += 1) {
  const strIngredient = allData[`strIngredient${i}`];
  const strMeasure = allData[`strMeasure${i}`];

  items.push({
    ingredient: strIngredient,
    measure: strMeasure,
  });
}

// const items = [
//   {
//     ingredient: "Beef",
//     measure: "1kg",
//   },
//   …
// ];

转换数据后，您可以轻松地将其传递给您的组件

function Recipe(props) {
  const { items } = props.items;

  return (
    <ul>
      {items.map((item) => (
        <li key={item.ingredient}>
          {item.ingredient}: {item.measure}
        </li>
      ))}
    </ul>
  );
}

<Recipe items={items} />;