react关于父组件多次调用异步请求设置state导致的多次触发render函数解决方案

Question

最初的时候是这样的

我在slide组件中调用了componentWillReceiveProps 函数对获取过来的data进行了二次处理
结果我在组件容器遇到一个问题, 因为是分两部set 参数导致数据改变render函数又重新执行了一次，导致我在slide组件所处理的数据并不是我想要的（我只想让他执行一次结果执行了两次应该是因为render函数被二次执行的原因）

我目前想到的解决方案是把数据一次性set这样看来貌似是好了但是没有实际解决问题，如果我有10几个异步请求的数据要在容器组件中获取的画这样的方法就不太好 (调用了promise会造成阻塞) 不知道有没有同学有同样的问题和解决方案。

Answer 1

10几个异步！
没办法了，上redux吧，再来个中间件处理
然后你的上面的代码就会变成这样：
//组件代码

componentDidMount() {
      this.props.getData()
}

//redux代码省略
//redux-saga 或者其他中间件代码

function* getData() {
  while(true) {
    try {
      yield take(actions.GET_SLIDES)//监听获取数据action
      yield put(setLoading(true))
      const { silde_data } = yield call(serverAPI.getSlides)//获取第一条ajax结果
      const { newmusic_data } = yield call(serverAPI.getNewMusic, silde_data.result)//根据第一条结果发起第二条ajax
      yield put(actions.SAVE_DATA, silde_data, newmusic_data)//存储2个data到redux store
      yield put(setLoading(false))
    } catch(error) {
      yield put(setLoading(false))
    }
  }
}

//假设这2个data是需要组合的，可以用reselect库