Javascript 响应redux初始化函数，而不考虑状态更改

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

我有一个组件，当它装载时，我使用action creator发出异步请求以获取一些默认值，稍后我还会调用

somethingElse（）

，这会使我的UI重新呈现，因为状态已更新：

下面是action creator：

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

componentDidMount（）{
this.props.requestDefaults（）；
}
render（）{
//已收到异步数据显示按钮-此按钮只需一次
if（this.props.defaults.data！==未定义）{
做吧
}
}
//请求默认值&某些默认值
函数MapStateTops（{defaults，someOther}）{
返回{defaults，someOther}
}

---

现在，每当我调用

this.props.someThingElse

时，都会对状态进行更改，并且在我的

render（）

函数中，按钮会再次被重新渲染，这就是问题所在-当我收到异步数据时，我只需要渲染一次。但是现在状态更新了，并且再次调用了

render（）

，因为现在我有

这个.props.defaults.data

我的按钮再次被重新渲染，但我只需要在第一次异步调用后执行一次，而不是在以后状态更改时执行…

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

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

---

酷，我刚刚浏览了React文档，发现了这个方法，现在你也确认了。非常感谢您的快速回复！嗯，我现在遇到了另一个问题。如果我想渲染除按钮之外的其他内容。。如果shouldComponentUpdate返回false，则不会渲染任何内容……您可以在shouldComponentUpdate中为return true添加更多选项，但是会多次调用re render。我认为最好的解决方案是将这个按钮保存在单独的组件中，并通过道具传递回调。