如何使用 ZDE9B9ED78D7E2E1DCEEFFEE780E2F91Z 在 map function 中正确破坏 object？

Question

I would like to know how can i destruct object within .map function using javascript, i have react js component and within return method i have the code below:

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

我有下一个错误： Parsing error: Unexpected token... = setItem ，我想它是什么

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

UPD 完整返回码：

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声明，并且当您使用箭头 function 的简洁形式（ =>后面没有{ ）时，主体是一个表达式。

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

{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>
    ))}
  </>
);