reactjs - 不要重新安装组件，而是更改值

Question

我有一个组件使用 s3 存储桶的图像 id 渲染一些值。已经创建了一个子组件，它将调用 aws 服务器并获取图像 URL。已设置加载程序，直到 API 调用正在进行。从调用中接收到 URL 后，加载程序将停止并呈现图像。

问题：我对要执行的值进行了一些操作。像维护值，递增递减。

在更新状态时，将重新安装一个组件。并再次调用并加载图像 API。

shouldComponentUpdate不会工作。因为如果我要使用它，它不会在屏幕上显示更改。

已设置加载程序直到图像加载。但是在每个按钮点击时显示加载器不是一个有效的事情。寻找更好的解决方案。在过去 12 小时内一直停留在这个问题上。如果有人可以帮助我摆脱这个，我将非常感激。

谢谢你。

标签： reactjsamazon-s3aws-lambdareact-component

Answer 1

我认为问题在于componentWillReceiveProps方法内部<LoadImage />

componentWillReceiveProps(nextProps){
        if (this.props !== nextProps) {
            this.setState({
                image:DefaultImage,
                loading:true
            })
            this._loadImages(nextProps)
        }else{
            this.setState({
                loading: false,
            })
        }
    }

您正在调用this._loadImages(nextProps)，当道具从所有者组件传入时，可以一次又一次地调用它。

即使您正在对传入的道具进行比较，this.props !== nextProps也将始终为真，因为它们都是对象。你可以看到一些关于这个的问题。

你会更好地对你关心的特定道具进行比较——如果这是你想要的方式。

还要注意 componentWillReceiveProps的是已弃用，您应该查看getDerivedStateFromProps. 在此处查看文档。