如何解决通过为组件提供 prop 将数组存储在 React Hook 中
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",{
title: "? Getting credit: Depth of credit information",iso: `${hookID}`
}
];
const GettingElectricity = [
{
title: "? Getting electricity - Score",indicatorCode: "IC.ELC.ACES.DFRN.DB1619",{
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 文件。
有人可以向我解释解决这种情况的最佳做法是什么吗?
我真的很感激。
解决方法
如果我理解你的问题,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",{
title: "? Getting credit: Depth of credit information",GettingElectricity: [
{
title: "? Getting electricity - Score",indicatorCode: "IC.ELC.ACES.DFRN.DB1619",{
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>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。