仅在打字稿 React 中为数组的最后一个索引设置样式？

Question

我现在唯一的想法是

if (customFields.values[0]) {
    <View style={styles.borderContainer} />; }

对于这个数组

let customFields: Array<{
              value: any;
              label: string;
            }> = [];

  if (query.data) {
              customFields = query.data.current_squad.custom_fields
                .filter(
                  (customField) =>
                    customField.is_visible_on_squads &&
                    customField.custom_field_value.value
                )
                .map((customField) => {
                  return {
                    value: customField.custom_field_value.value,
                    label: customField.title,
                  };
                });
              }
            }

但这显然行不通。最终目标是在数组的最后一个位置创建一个边框，该边框基于一个人创建的许多自定义字段。我是前端和 JS 语言的新手，所以任何指向正确方向的指针都将不胜感激。

Answer 1

map 高阶函数接受一个索引参数，但是您需要在 filter 函数之后和 map 函数之前获取您的列表长度：

const exampleResult = custom_fields
  .filter(
    (customField) =>
      customField.is_visible_on_squads &&
      customField.custom_field_value.value
    )
)

const listLenght = exampleResult?.legnth;

const result = exampleResult
  .map(
    (customFiled, index) => {
      if(index === listLength -1 ) {
         return {
           value: customField.custom_field_value.value,
           label: customField.title,
           style: {styles.borderContainer}
         };
      } else {
         return {
           value: customField.custom_field_value.value,
           label: customField.title,
         };
      }
    }
  )

作为另一种解决方案，您可以将样式属性添加到 filter 和 map 方法之后的最后一项：

const customFields = someData.filter(() => {}).map(() => {}) // just pseoudo

const lastItem = customFields[-1];

customFileds[-1] = {...lastItem, style: {styles.borderContainer}}

仅在打字稿 React 中为数组的最后一个索引设置样式？

Styling only to last index of an Array in typescript React?

arrays

styling

typescript

react-native