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

Question

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

我有一个组件，当它挂载时，我使用 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 我的按钮再次重新呈现，但我需要它只在第一次异步调用后完成一次，而不是在状态更改时完成后来...

Answer 1

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

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

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

React-redux initialization function regardless of state changes

javascript

reactjs

redux

react-redux