Question

我一直在寻找解决此错误的方法... 我是React的新手。

我在聊天。我们可以发送消息，图像，视频，带有消息的图像等。

我已经制作了一个简短的视频来向您展示这个问题，因为很难解释（如标题所示）。在此处观看视频：https://vimeo.com/336108493

渲染图像的代码：

const renderImage = (item, popup) => {
        return (
            <div className={"message-image"}>
                <img className={"img-fluid curs-pointer"} src={item['media'].cachePath} alt={"Image"} onClick={() => this.setState({ openLightboxMessageId:  item.id  })}/>
                {this.state.openLightboxMessageId === item.id && (
                    <Lightbox
                        mainSrc={item['media'].cachePath}
                        onCloseRequest={() => this.setState({ openLightboxMessageId:false})}
                        reactModalStyle={{overlay : {zIndex:"1040"}}}

                    />
                )}
            </div>
        );
    };

上传图像时，我们在数据库中创建新行，然后检索组件中的所有行，并将项目推入数组：

this.state.messages.map((item, i) => {
        items.push(
            <li className={"media message mb-3"+ (item.userId == user.id ? ' message-current_user':'') + (item.isAdminMessage ? ' message-admin':'')} >

                {item.userId != user.id &&
                    <div className="mr-3">
                        <Avatar user={item} isAdmin={item.isAdminMessage}/>
                    </div>
                }
                <div className={"media-body "}>
                    {renderContent(item)}
                    <div className={item.userId == user.id ?'text-right':'text-left'}>
                        <small className={"text-muted"}>{item['firstname']} {item['lastname']}. - {moment(item['createdAt']).fromNow()}</small>
                    </div>
                </div>
                {item.userId == user.id &&
                <div className="ml-3">
                    <Avatar user={item} isAdmin={item.isAdminMessage}/>
                </div>
                }
            </li>
        );
    });

有人知道这种浏览器缓存问题从何而来吗？如果我们发送短信，则无需再添加图像，而是没有问题。

感谢您的帮助

反应-在聊天中创建新消息时出现图像问题

0 个答案: