Question

我一直在寻找并且有很多类似的问题，但没有解决我的问题。

据我所知，如果连接组件（也称为容器）与redux嵌套也连接到同一商店的子组件，则所有故障排除都会结束。当父状态得到更新时，它会重新呈现自身及其未连接的子组件，而不是嵌套的连接组件。

为了清楚，子连接组件从父级获取其数据但连接到创建操作，而这些操作又会改变父级的状态。

所以我的问题是假设是真的吗？或不？如果是的话，处理这个问题的最佳方法是什么。我知道来自父母的传递回调会起作用。但是层次结构是这样的，我必须通过其他组件传递回调。即。

containerA --> componentB --> containerC

所以当A的道具通过redux存储更新时，它会重新呈现，B也是如此。但不是C.

class HomePage extends Component{

renderActivities(){
    return _.map(this.props.activities, activity => {
        return <Activity activity={activity} key={activity.id}/>;
    });
}

render(){
    const {activities} = this.props;
    if(_.isEmpty(activities))
        return <div>Loading</div>;

    return <div>
              {this.renderActivities()}
        </div>
}
}

function mapStateToProps({ activities}) {
    return { activities};
}

export default connect(mapStateToProps, {fetchActivities})(HomePage);

ActivityItem.js

const Activity = ({activity}) => {
    const {user} = activity;
    return <div className="col-md-9"><MetaMovie movie={activity.movie}/></div>;
};

export default Activity;

MetaMovie.js

class MetaMovie extends Component {

render() {
    const {movie} = this.props;

    let action_btn = <button className="fa fa-plus" onClick={() => this.props.add(movie.id)}/>;
    if (movie.user_statuses !== null && movie.user_statuses.removed === false)
        action_btn = <button className="fa fa-minus" onClick={() => this.props.remove(movie.id)}/>;

    return action_btn;
    }
}

export default connect(null, {add, remove})(MetaMovie);

编辑：现在我将操作传递给MetaMovie作为回调，它可以正常工作。行动的起源并不重要。对？所以我只能想到它与MetaMovie现在没有连接到redux商店有关。

Answer 1

我想我明白了。您可以在此处设置活动的密钥：

return <Activity activity={activity} key={activity.id}/>;

但是你并没有真正使用密钥，这就是React需要确定它是否应该重新渲染的。

因此，在Activity中，您需要包含密钥：

const Activity = ({activity}) => {
    const {user} = activity;
    const {key} = this.props;
    return <div className="col-md-9" key={key}><MetaMovie movie={activity.movie}/></div>;
};

如果由于某种原因仍然无效，请尝试通过将密钥更改为key={Math.random()}来强制重新呈现。

重新呈现子容器ReactJS On父容器

1 个答案: