как исправить «Ожидается присваивание или вызов функции и вместо этого появляется выражение»

Question

Я использовал массив объектов, которые я хочу визуализировать в jsx динамически

packageItems=[
    {
        id: 1,
        image: require('./assets/image1.png'),
        title: 'title1',

    },
    {
        id: 2,
        image: require('./assets/image2.png'),
        title: 'title',

    }
]

, которые я хочу визуализировать в том же компоненте:

return (
 {packageItems.map((packageItem, index) => {
                <div className="card" style={{ width: "18rem" }} key={packageItem.id}>
                    <img src={packageItem.image} className="card-img-top" alt="static website icon" />
                    <div className="card-body">
                        <h3 className="card-title">{packageItem.title}</h3>
                    </div><hr />                      
                </div>
            })}
)

Answer 1

Вам нужно явно return jsx из вашего map

return (
    {
        packageItems.map((packageItem, index) => {
            return (
                <div className="card" style={{ width: "18rem" }} key={packageItem.id}>
                    <img src={packageItem.image} className="card-img-top" alt="static website icon" />
                    <div className="card-body">
                        <h3 className="card-title">{packageItem.title}</h3>
                    </div><hr />
                </div>
            )
        })
    }
)

При вызове map из блока jsx вам не нужно возвращать, потому что выражения выполняются немедленно:

const Component = () =>{
    return(
        { arr.map(item => <div />) }
    )
}

Взгляните на приведенный выше код:

Вам не нужно return arr.map(/*...*/), поскольку возвращаемый массив уже неявно встроен в ваш блок jsx (помните, что arrays являются действительными детьми). Но функция, переданная в качестве аргумента map, также должна явно возвращать новый элемент сопоставленного массива. При использовании одной строки arrow functions оператор return также является неявным

arr.map(item => <div/>)

Это эквивалент

arr.map(item =>{
    return item
})

Здесь вы можете безопасно опустить return, но с функциями, которыезанимает более одной строки (как ваша) вам нужно явно return преобразование

arr.map(item =>{
    return(
        <>
            <span> Foo </span>
        </>
    )
})