javascript - .map() 中的 If 语句？

Question

我想知道如何在 .map() 中实现 if 语句
请参阅下面的代码。
目前，如果当前用户未上传图片，删除按钮将被禁用，但我的目标是完全不呈现删除按钮。

    return <Grid container justify="center" spacing={2}>
        {/* All images */}
        {docs && docs
            // For every image
            .map(image => (
                // In a grid item
                <Grid className="img-item" item key={image.id} xs={12} md={6} lg={4}>
                    {/* all accounts */}
                    {docs2 && docs2
                        // For every single image:
                        // Filter statament only contains the user of specific image
                        // https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d
                        .filter((user) => image.userID === user.userID)
                        //Now you have the user that belongs to the image.ID
                        .map(user => (
                            <div key={image.id}>
                                <img src={image.url} alt="uploaded pic" />
                                <Typography variant="subtitle1"> By {user.userName}

                                    {/* How do I implement this if statement for the IconButton? */}
                                    {/* if ({handleButton(image.userID)} === false){
                                        return 
                                    } */}

                                    {/* Delete button */}
                                    <IconButton
                                        disabled={handleButton(image.userID)}
                                        color="secondary" aria-label="delete image"
                                        onClick={() => handleDeleteImage(image.id, image.userID, image.name)}
                                        component="span" >
                                        <DeleteForever />
                                    </IconButton>

                                </Typography>
                            </div>
                        ))}
                </Grid>
            ))}
    </Grid>
}
export default ImageGrid;

Answer 1

你要找的是

   return <Grid container justify="center" spacing={2}>
    {/* All images */}
    {docs && docs
        // For every image
        .map(image => (
            // In a grid item
            <Grid className="img-item" item key={image.id} xs={12} md={6} lg={4}>
                {/* all accounts */}
                {docs2 && docs2
                    // For every single image:
                    // Filter statament only contains the user of specific image
                    // https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d
                    .filter((user) => image.userID === user.userID)
                    //Now you have the user that belongs to the image.ID
                    .map(user => (
                        <div key={image.id}>
                            <img src={image.url} alt="uploaded pic" />
                            <Typography variant="subtitle1"> By {user.userName}

                                {/* How do I implement this if statement for the IconButton? */}
                                {/* if ({handleButton(image.userID)} === false){
                                    return 
                                } */}

                                {/* Delete button */}
                                { handleButton(image.userID) && 
                                    <IconButton
                                        disabled={handleButton(image.userID)}
                                        color="secondary" aria-label="delete image"
                                        onClick={() => handleDeleteImage(image.id, image.userID, image.name)}
                                        component="span" >
                                        <DeleteForever />
                                    </IconButton>
                                 }
                            </Typography>
                        </div>
                    ))}
            </Grid>
        ))}
</Grid>
}
export default ImageGrid;