在对象数组上映射时使用解构时如何写我的条件

Question

我正在处理以下对象数组：

var persons: {
    label: string;
    value: string;
}[]

我像这样遍历数组：

   {persons?.map((person) => {
      return (
        <button
          key={person.value}
          data-active={value === person.value}
        >
          {person.label}
        </button>
      );
    })}

现在我使用解构，所以我不必一直写person.value等，所以我没有冗余代码:

   {persons?.map(({ value, label }) => {
      return (
        <button
          key={value}
          // data-active={value === person.value}
        >
          {label}
        </button>
      );
    })}

但是现在如何获取布尔值 data-active={value === person.value}（因为现在 {value === value} 始终为真）？

Answer 1

对value使用alias（我用过v），所以解构后的value不会遮蔽value外部范围：

 {persons?.map(({ value: v, label }) => {
    return (
      <button
        key={v}
        data-active={value === v}
      >
        {label}
      </button>
    );
  })}

Answer 2

如果你想使用解构，你需要避免隐藏你现有的 value 变量。您可以在解构模式中使用重命名：

{persons?.map(({ value: thisValue, label }) => {
   return (
     <button
       key={thisValue}
       data-active={value === thisValue}
     >
       {label}
     </button>
   );
})}

...但我倾向于重命名您的外部 value 变量，也许将其称为 activeValue。那么你不需要重命名：

const activeValue = /*...*/;
// ...
{persons?.map(({ value, label }) => {
   return (
     <button
       key={value}
       data-active={activeValue === value}
     >
       {label}
     </button>
   );
})}

在对象数组上映射时使用解构时如何写我的条件

How write my condition when using destructuring when mapping over an Array of objects

javascript

arrays

reactjs

conditional-statements

destructuring