React-redux 初始化函数不考虑状态变化

React-redux initialization function regardless of state changes

我真的不知道怎么描述才可以。我在异步调用后需要某种初始化函数,无论以后状态是否更改,它都只会被调用一次。

我有一个组件,当它挂载时,我使用 action creator 发出异步请求以获取一些默认值,我稍后还会调用 somethingElse(),这使我的 UI 再次重新渲染,因为状态已更新:

这是动作创作者:

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;
}

在我的组件中 - 当它被破坏时我发出异步请求并且当我收到响应时我使 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 我的按钮再次重新呈现,但我需要它只在第一次异步调用后完成一次,而不是在状态更改时完成后来...

您可以使用 shouldComponentUpdate 方法并仅在默认数据更改时重新渲染。在你的情况下,默认数据只改变一次(默认情况下它是空的,下一步有一些数据),所以渲染方法只会被调用一次。

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