Question

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

我有一个组件，当它安装时，我使用动作创建器创建异步请求以获取一些默认值，我稍后再调用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方法，仅在更改默认数据时重新渲染。在你的情况下，默认数据只改变一次（默认情况下，下一步是空的，有一些数据），所以render方法只会被调用一次。

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

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

1 个答案: