如何在函数内的 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-native 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>
    ));