在 map 函数内部分配一个 const 变量

Question

我正在使用Reactivesearch，尝试在.map函数中赋值一个const变量。具体来说，像这样：

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。

这可能吗？

- Amir Asyraf

---

可能是在React中呈现array.map()的重复问题、如何在render方法中循环遍历react const变量和将变量放入render()返回-React Native。 - adiga

如果您的函数有多个语句，则需要一个函数体：x=>{x+1;return 22}，而不是x=>22。您可以简单地执行以下操作：data.map(({propertyName,id})=><div ... - HMR

Answer 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>
        )

- trincot

Answer 2

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

修复：

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

- Danyal Imran