Question

我使用了要在jsx中动态呈现的对象数组

function startShowingMessage(elem, url){
  setInterval(async function(){
    const response = await fetch(url);
    const text = await response.text();
    elem.textContent = text;
  }, 1000);     
}

我想在同一组件中呈现的

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

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

    }
]

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

从jsx块中调用map时，无需返回原因表达式即可立即执行：

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

看看上面的代码：

您不需要return arr.map(/*...*/)，因为从它返回的数组已经隐式嵌入在您的jsx块内（请记住arrays是有效的react的孩子）。但是，作为参数传递给map的函数也需要显式返回映射数组的新项目。当使用一行arrow functions时，return语句也是隐含的

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

等于

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

在这里您可以安全地省略return，但是对于占用不止一行的函数（如您的函数），您需要明确return转换

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

如何修复'预期分配或函数调用，而是看到一个表达式'

1 个答案: