无论状态如何变化，React-redux初始化函数

我真的不知道如何描述尽可能精确。在异步调用之后，我需要某种初始化函数，无论稍后状态如何更改，该函数都只会被调用一次。无论状态如何变化，React-redux初始化函数

我有一个组件，当它安装我用行动创造者得到一些默认值可以异步请求，我也叫somethingElse()后，这让我的用户界面再次重新呈现，因为状态最后一次更新：

这里是行动的创建者：

export function requestDefaults(){  
    return { 
    type:  REQUEST_DEFAULTS, 
    payload: axios.get(ROOT_URL), 
    }; 
} 

export function somethingElse(){  
    return { 
    type:  SOME_OTHER, 
    payload: "Whatever", 
    }; 
}

我的减速器：

switch (action.type) { 
    case REQUEST_DEFAULTS: 
     return action.payload.data; 
     break; 

    case SOME_OTHER: 
     return action.payload; 
     break; 

    default: 
     return state; 
}

在我的组件 - 当它maunted我做异步请求，而w母鸡我收到响应我做UI可见 - 在这种简化的情况下一个按钮，它调用somethingElse：

componentDidMount(){ 
    this.props.requestDefaults(); 
} 


render(){ 
    // Have received async data show button - THIS NEEDS TO BE ONLY ONCE 
    if(this.props.defaults.data !== undefined){ 
    <a onClick={ this.props.someThingElse }>do it</a> 
    } 
} 

// REQUEST_DEFAULTS & SOME_OTHER 
function mapStateToProps({ defaults, someOther}){ 
    return { defaults, someOther} 
}

现在，每当我打电话this.props.someThingElse变化的状态是由在我render()功能键被重新呈现再次，这是问题 - 我需要它只被渲染一次，当我收到异步数据。但现在状态已更新，并且render()被再次调用，因为现在我有this.props.defaults.data我的按钮被重新渲染了，但我需要它在第一次异步调用后才完成一次，而不是在稍后状态更改时完成...

来源

2016-05-18 fjckls

您可以使用shouldComponentUpdate方法，并仅在默认数据更改时重新呈现。在你的情况下，默认的数据只更改一次（默认情况下它是空的，下一步有一些数据），所以render方法只会被调用一次。

shouldComponentUpdate(nextProps, nextState) { 
    return this.props.defaults.data !== nextProps.this.props.defaults.data; 
}

来源

2016-05-18 12:56:25 Janom

很酷，我只是浏览React文档，并发现这种方法，现在你也证实了它。非常感谢您的快速回复！ – fjckls

嗯，我现在遇到了另一个问题。如果我想要除按钮之外的其他东西被渲染..如果shouldComponentUpdate返回false然后没有得到渲染.... – fjckls

您可以添加更多的选项在shouldComponentUpdate返回true，但然后重新渲染将被称为不止一次。我认为这里最好的解决方案是将这个按钮放在单独的组件中，并通过道具传递回调。 – Janom

无论状态如何变化，React-redux初始化函数

回答

相关问题