通过给组件一个 prop 来在 React Hook 中存储一个数组答案

【问题标题】：Storing an array in a React Hook by giving a prop to the component通过给组件一个 prop 来在 React Hook 中存储一个数组
【发布时间】：2021-03-10 10:37:48
【问题描述】：

import React, { useState } from "react";
import { Grid, Typography } from "@material-ui/core";

const ReactHookExample = ({ hookID, givenArray }) => {
  const [typeofItemsArray, setTypeofItemsArray] = useState({
    givenArray
  });

  const ConstructionItems = [
    {
      title: "????️ Dealing with construction permits",
      indicatorCode: "IC.CNST.PRMT.DFRN.DB1619",
      iso: `${hookID}`
    },
    {
      title: "????️  Building quality control index:",
      indicatorCode: "IC.CNST.PRMT.BQCI.015.DB1619.DFRN",
      iso: `${hookID}`
    }
  ];

  const CreditItems = [
    {
      title: "???? Getting Credit total score",
      indicatorCode: "IC.CRED.ACC.ACES.DB1519",
      iso: `${hookID}`
    },
    {
      title: "???? Getting credit: Depth of credit information",
      indicatorCode: "IC.CNST.PRMT.BQCI.015.DB1619.DFRN",
      iso: `${hookID}`
    }
  ];

  const GettingElectricity = [
    {
      title: "???? Getting electricity - Score",
      indicatorCode: "IC.ELC.ACES.DFRN.DB1619",
      iso: `${hookID}`
    },
    {
      title: "???? Getting electricity: Communication of tariffs and tariff",
      indicatorCode: "IC.ELC.COMM.TRFF.CG.01.DB1619",
      iso: `${hookID}`
    }
  ];

  return (
    <div>
      <>
        {typeofItemsArray &&
          typeofItemsArray.map((country, index) => {
            return (
              <ul>
                <li> {country.title}:</li>
                <li> Iso: {country.iso} </li>
                <li> Code: {country.indicatorCode}</li>
              </ul>
            );
          })}
      </>
    </div>
  );
};

export default ReactHookExample;

大家好，感谢您的光临！对于你们中的一些人来说，这可能是一个简单的问题，或者我没有正确理解这个概念，但是可以将数组存储在 React Hook 中吗？并通过道具将其交给组件？为了更清楚地说明我的观点，我创建了一个code Sandbox，您可以在其中找到 ReactHookExample.js 文件。

有没有人可以向我解释解决这种情况的最佳做法是什么？

我真的很感激。

【问题讨论】：

props如何与数组相关？而你的沙盒示例不起作用
沙盒工作正常，但代码不工作，对吗？这就是重点，我将如何使其工作？应该给出 prop 来确定应该选择哪个数组，或者：ConstructionItems 或 CreditItems 或 GettingElectricity

标签： javascript reactjs react-hooks react-state react-state-management

【解决方案1】：

如果我理解您的问题，givenArray 是项目类型的字符串表示，因此您可以编写一个返回映射对象的辅助函数，这里没有任何理由，因为它是从道具推导出来的。

const genItems = (hookID) => ({
  ConstructionItems: [
    {
      title: "?️ Dealing with construction permits",
      indicatorCode: "IC.CNST.PRMT.DFRN.DB1619",
      iso: `${hookID}`
    },
    {
      title: "?️  Building quality control index:",
      indicatorCode: "IC.CNST.PRMT.BQCI.015.DB1619.DFRN",
      iso: `${hookID}`
    }
  ],
  CreditItems: [
    {
      title: "? Getting Credit total score",
      indicatorCode: "IC.CRED.ACC.ACES.DB1519",
      iso: `${hookID}`
    },
    {
      title: "? Getting credit: Depth of credit information",
      indicatorCode: "IC.CNST.PRMT.BQCI.015.DB1619.DFRN",
      iso: `${hookID}`
    }
  ],
  GettingElectricity: [
    {
      title: "? Getting electricity - Score",
      indicatorCode: "IC.ELC.ACES.DFRN.DB1619",
      iso: `${hookID}`
    },
    {
      title: "? Getting electricity: Communication of tariffs and tariff",
      indicatorCode: "IC.ELC.COMM.TRFF.CG.01.DB1619",
      iso: `${hookID}`
    }
  ]
});

const ReactHookExample = ({ hookID, givenArray = "GettingElectricity" }) => {
  return (
    <div>
      <>
        {genItems(hookID)[givenArray].map((country, index) => {
          return (
            <ul>
              <li> {country.title}:</li>
              <li> Iso: {country.iso} </li>
              <li>Code: {country.indicatorCode}</li>
            </ul>
          );
        })}
      </>
    </div>
  );
};

【讨论】：

谢谢，这更有意义！