如何在一个函数中动态创建和填充一个React-Native Typescript数组?

Question

我现在有什么:到目前为止，在我的Storybook文件中，我创建了一个数组，并将其作为组件的属性传递。

我想要达到的目标:然而，我希望简单地传递长度作为道具，然后从1到长度动态创建一个数组，然后显示它，而不是使用整个对象数组作为道具。我不知道在这里我该怎么做。

这是我的设置我的项目，因为我现在有它，这是创建一个数组作为道具，抓住故事书虚拟数组数据，转移它，然后显示它，这似乎是一个混乱的我，但我所有的尝试动态做这个导致错误和混乱。

我希望orderCount是一个数字，然后使用该数字创建一个新的数组，长度为orderCount，从1到orderCount，然后映射它。这里的问题是我想在displayOrders中做到这一点，但我不知道如何在函数中的。map()之前做任何事情。

---

故事书:

import {LoyaltyStatus} from '@molecules/LoyaltyStatusCard';
import {storiesOf} from '@storybook/react-native';
import React from 'react';
const dummy = [
{id: 1},
{id: 2},
{id: 3},
{id: 4},
{id: 5},
{id: 6},
{id: 7},
{id: 8},
{id: 9},
];
storiesOf('Loyalty Status', module).add('Default', () => (
<LoyaltyStatus
statusTier="Gold"
points={10}
orderCount={dummy.map((order) => ({
orderNumber: order.id,
}))}
filled={7}
/>
));

---

react原生Typescript组件:

import * as React from 'react';
import styled from '@styled-components';
import {Text, TextTypes} from '@atoms/Text';
import Icon from 'react-native-vector-icons/FontAwesome5';
export interface ILoyaltyStatusProps {
orderCount: {
orderNumber: number;
}[];
filled: number;
statusTier: string;
points: number;
}
export const LoyaltyStatus: React.FC<ILoyaltyStatusProps> = ({
orderCount,
filled,
statusTier,
points,
...props
}) => {
const displayOrders = () =>
orderCount.map((ORDERS) => (
<OrderTextContainer>
<OrderText>{ORDERS.orderNumber}</OrderText>
{ORDERS.orderNumber <= filled && <CrownIcon />}
</OrderTextContainer>
));
return (
// eslint-disable-next-line react/jsx-props-no-spreading
<Container {...props}>
<InnerContainer>
<MainContentContainer>
<TitleText>{`Unlock ${statusTier} Status`}</TitleText>
<SubText>{`Just order ${orderCount.length} times this month.`}</SubText>
<OrderContainer>{displayOrders()}</OrderContainer>
</MainContentContainer>
<FooterContentContainer>
<PointsText>
{`You'll earn ${points} points per dollar when you unlock ${statusTier} Status.`}
</PointsText>
</FooterContentContainer>
</InnerContainer>
<IconContainer>
<LockIcon />
</IconContainer>
</Container>
);
};

---

编辑:我最终的解决方案是这样做，但答案真的帮助我实现了这一点。我选择了这个解决方案，因为我认为它对我来说更有意义，并且更清楚地读取

const populateArray = (length: number) => {
const newArr = new Array(length);
for (let i = 1; i <= length; i++) {
newArr[i] = i;
}
return newArr;
};
const displayOrders = () =>
populateArray(orderCount).map((ORDERS) => (
<OrderTextContainer>
<OrderText>{ORDERS}</OrderText>
{ORDERS <= filled && <CrownIcon />}
</OrderTextContainer>
));

Answer 1

您可以这样添加getDummyArray函数:

const getDummyArray = (length) => {
return length > 0
? [...Array(length)].map((_, idx) => ({ id: idx + 1, orderNumber: idx + 1 }))
: [];
};

就变成了这样:

export const LoyaltyStatus: React.FC<ILoyaltyStatusProps> = ({
orderCount,
filled,
statusTier,
points,
...props
}) => {
const getDummyArray = (length) => {
return length > 0
? [...Array(length)].map((_, idx) => ({ id: idx + 1, orderNumber: idx + 1 }))
: [];
};
const displayOrders = () =>
getDummyArray(orderCount).map((ORDERS) => (
<OrderTextContainer>
<OrderText>{ORDERS.orderNumber}</OrderText>
{ORDERS.orderNumber <= filled && <CrownIcon />}
</OrderTextContainer>
));