Question

我正在构建一个使用React每隔几秒自动更新的仪表板。我从Ajax调用获取属性并将它们传递给组件，直到现在一直工作正常。

在其中一个组件中，我需要设置每x秒自动更新的图像源，但在这种情况下我需要使用状态。

这是我的组成部分：

var ImageContainer = React.createClass({

    getInitialState: function(){
        return { src: this.props.initialImage};
    },

    shouldComponentUpdate: function(nextProps, nextState){
        this.setState({ src: this.props.initialImage });
        return true;
    },  

    render: function() {
        return (
            <div className="col-md-8 col-sm-12 nopadding post-image vcenter" >
                <img src={this.state.src} className="img-responsive center-cropped"/>
            </div>
        );

    }
});

这很好用但是too much recursion error。

进行了搜索，发现this answer建议使用componentWillReceiveProps来设置状态，但是当我使用它时，图像不会在第一次自动刷新时更新，仅在第二次自动刷新时更新。< / p>

这是我实施componentWillReceiveProps后的当前流程：

Ajax接收呼叫结果，假设数据为A
调用状态传递给两个组件，即图像和文本
初始通话＆gt;＆gt;图像数据A，文本数据A
组件刷新以获取数据B＆gt;＆gt;图像数据A，文本数据B
组件刷新以获取数据C＆gt;＆gt;图像数据B，文本数据C

......等等。你能帮我理解为什么会这样吗？

注意：我需要使用state，因为需要对componentDidMount运行检查以确认图像有效

Answer 1

我过去曾遇到与componentWillReceiveProps类似的问题。假设它被称为它有新的道具，似乎并非总是如此。

请参阅：https://facebook.github.io/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html

递归可能是由于在shouldComponentUpdate中设置状态而不返回false来停止渲染。可能值得尝试以下方面：

shouldComponentUpdate: function(nextProps, nextState) {
   this.setState({ src: nextProps.initialImage });
   return nextProps.initialImage !== this.props.initialImage;
}

通过添加将旧道具和状态与其替换进行比较的条件，它应该停止递归。

注意：我还没有能够测试此代码，所以可能关闭

React shouldComponentUpdate过多的递归

1 个答案: