React-redux 初始化函数，不管状态变化答案

【问题标题】：React-redux initialization function regardless of state changesReact-redux 初始化函数，不管状态变化
【发布时间】：2016-05-18 12:45:42
【问题描述】：

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

我有一个组件，当它挂载时，我使用操作创建器发出异步请求以获取一些默认值，稍后我也调用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，我的按钮再次重新渲染，但我需要在第一次异步调用后只执行一次，而不是在以后状态更改时......

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

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

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

【讨论】：

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