[英]How to properly destruct object within map function using javascript?
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: 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
....
</>
and i have the next error: Parsing error: Unexpected token... = setItem
, i thought what it is我有下一个错误:
Parsing error: Unexpected token... = setItem
,我想它是什么
EsLint
error and used // eslint-disable-next-line
to disable it, but it didn't work. EsLint
错误并使用// eslint-disable-next-line
禁用它,但它不起作用。
UPD full return code: 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>
) )
You can't have a const
declaration within an expression, and when you use the concise form of an arrow function ( =>
without a {
after it), the body is an expression.表达式中不能有
const
声明,并且当您使用箭头 function 的简洁形式( =>
后面没有{
)时,主体是一个表达式。
You can destructure in the parameter list, though.不过,您可以在参数列表中解构。 For instance:
例如:
{setItems.map(({childContentfulPartFeatureSetLearnMoreOptionalTextTextNode: learnNode}) => (
// ...use `learnNode` here...
In context:在上下文中:
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>
);
Try something like this.尝试这样的事情。 (destructure and renaming)
(解构和重命名)
const setItems = [{ abc: 5 }];
return (
<>
{setItems.map((setItem) => {
const { abc: xyz } = setItem;
return <div>{xyz}</div>;
})}
</>
);
// Alternate way, simplified. // 替代方式,简化。
return (
<>
{setItems.map(({ abc: xyz }) => (
<div>{xyz}</div>
))}
</>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.