不要重新安装组件但更改值

Question

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

问题: 我对要执行的值有一些操作。比如维护值，递增递减。

更新状态时，将重新挂载一个组件。并且图像 API 将被调用并加载。

shouldComponentUpdate 将不起作用。因为如果我使用它，它不会在屏幕上显示变化。

已设置加载程序直到图像加载。但是在每次单击按钮时显示加载程序是无效的。寻找更好的解决方案。坚持过去 12 小时的问题。如果有人能帮我摆脱这个，我将非常感激。

谢谢。

Answer 1

我认为问题出在 <LoadImage />

中的 componentWillReceiveProps 方法中

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

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

即使你正在对传入的 props 进行比较，this.props !== nextProps 也将始终为真，因为它们都是对象。你可以看到一些 questions on this.

你最好对你关心的特定道具进行比较 - 如果这是你想要的方式。

还要注意 componentWillReceiveProps 已弃用，您应该查看 getDerivedStateFromProps。 View the docs here.

不要重新安装组件但更改值

Don't remount component but change values

reactjs

amazon-s3

aws-lambda

react-component