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

Question

我实在不知道怎么形容才可以越准确越好。我在异步调用后需要某种初始化函数，无论以后状态是否更改，它都只会被调用一次。

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

这是 Action 创建器:

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

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

还有我的 reducer :

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 我的按钮再次重新呈现，但我需要它仅在第一次异步调用后执行一次，而不是在稍后状态更改时执行...

Answer 1

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

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