通过为组件提供道具将数组存储在 React Hook 中

Question

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 文件。

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

非常感谢。

Answer 1

如果我理解你的问题，givenArray 是项目类型的字符串表示形式，因此你可以编写一个辅助函数，其中 returns 是一个映射对象，这里没有理由使用状态因为它是从道具中推导出来的。

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

通过为组件提供道具将数组存储在 React Hook 中

Storing an array in a React Hook by giving a prop to the component

javascript

reactjs

react-hooks

react-state

react-state-management