在 map 函数中分配一个 const 变量答案

【问题标题】：Assign a const variable inside a map function在 map 函数中分配一个 const 变量
【发布时间】：2019-06-14 23:41:34
【问题描述】：

我正在使用 Reactivesearch，我正在尝试在 map 函数中分配一个 const 变量。具体在.map这样的：

onAllData(data, streamData) {

    return (
        <div className="grid">
        {
            data.map((item) => 
                const propertyName = item.productName;

                <div className="flex-container card" key={item._id}>
                    <div className="content">
                        <p>{propertyName}</p>
                    </div>
                </div>
            )
        }
    );
}

const propertyName = item.productName; 给我带来了问题。 Error states unexpected token.

有可能吗？

【问题讨论】：

Rendering an array.map() in React 和 How to loop inside a react const variable in the render method 和 Putting a variable inside render() return - React Native 可能重复
如果你的函数有多个语句，你的函数需要一个主体：x=>{x+1;return 22}，而不是x=>22。您可以简单地执行以下操作：data.map(({propertyName,id})=><div ...

标签： javascript reactjs reactivesearch

【解决方案1】：

您需要从表达式语法转到块语法，使用大括号和return：

        data.map((item) => {
            const propertyName = item.productName;

            return (<div className="flex-container card" key={item._id}>
                <div className="content">
                    <p>{propertyName}</p>
                </div>
            </div>)
        })

但是，您也可以使用解构来获取您的propertyName，然后返回到一个表达式：

        data.map(({productName, _id}) =>
           <div className="flex-container card" key={_id}>
                <div className="content">
                    <p>{propertyName}</p>
                </div>
            </div>
        )

【讨论】：

【解决方案2】：

这是对箭头函数的不当使用。

修复：

data.map(({productName, _id}) => (
   <div className="flex-container card" key={_id}>
       <div className="content">
            <p>{productName}</p>
        </div>
   </div>
);

【讨论】：