如何使用 javascript 正确销毁 map 函数中的对象？

Question

我想知道如何使用 javascript 破坏 .map 函数中的对象，我有 React js 组件，在 return 方法中我有以下代码：

return (
    <>
      {setItems.map(setItem => (
      
      const { childContentfulPartFeatureSetLearnMoreOptionalTextTextNode: learnNode} = setItem
    ....
    </>

我遇到了下一个错误：Parsing error: Unexpected token ... = setItem，我以为是什么

EsLint错误并使用// eslint-disable-next-line禁用它，但它不起作用。

UPD 完整 return 代码：

return (
<div className={generalServiceItemClassName} key={guuid()}>
  {setItems.map(setItem => (
   const { childContentfulPartFeatureSetLearnMoreOptionalTextTextNode: learnNode} = setItem

    <div
      key={guuid()}
      className={cx(columnSizeClass, "service-items__item")}
      data-test="service-items"
    >
      {setItem.learnMore ? (
        <LearnMore
          className="service-items__item-learn-more-container"
          learnMoreLink={setItem.learnMore}
          text={}
          textClassName="service-items__item-texts-learn-more"
          learnMoreText={learnNode ? learnNode.setItem : null}
        >
          {renderItem(setItem)}
        </LearnMore>
      ) : (
        renderItem(setItem)
      )}
    </div>
  ))}
</div>

)

Answer 1

表达式中不能有 const 声明，当你使用箭头函数的简洁形式时（=> 后面没有 {）， body 是一个表达式。

不过，您可以在参数列表中解构。例如：

{setItems.map(({childContentfulPartFeatureSetLearnMoreOptionalTextTextNode: learnNode}) => (
    // ...use `learnNode` here...

在上下文中：

return (
    <div className={generalServiceItemClassName} key={guuid()}>
        {setItems.map(({childContentfulPartFeatureSetLearnMoreOptionalTextTextNode: learnNode}) => (
            <div
              key={guuid()}
              className={cx(columnSizeClass, "service-items__item")}
              data-test="service-items"
            >
                {setItem.learnMore ? (
                    <LearnMore
                        className="service-items__item-learn-more-container"
                        learnMoreLink={setItem.learnMore}
                        text={}
                        textClassName="service-items__item-texts-learn-more"
                        learnMoreText={learnNode ? learnNode.setItem : null}
                    >
                        {renderItem(setItem)}
                    </LearnMore>
                    ) : (
                        renderItem(setItem)
                    )
                }
            </div>
        ))}
    </div>
);

Answer 2

尝试这样的事情。（解构和重命名）

const setItems = [{ abc: 5 }];
return (
  <>
    {setItems.map((setItem) => {
      const { abc: xyz } = setItem;
      return <div>{xyz}</div>;
    })}
  </>
);

// 替代方式，简化。

return (
  <>
    {setItems.map(({ abc: xyz }) => (
      <div>{xyz}</div>
    ))}
  </>
);

如何使用 javascript 正确销毁 map 函数中的对象？

How to properly destruct object within map function using javascript?

javascript

destructuring

reactjs