react 問題集合

react 問題集合

1.一處prop更新全局更新

原因：不同組件共用了相同的state，

2.reducer更新時，對比沒有變化

組件狀態跟新代碼

componentDidUpdate(preProps, preState) {
	if (this.props.mapMsg.logAry != preProps.mapMsg.logAry &&
			this.props.mapMsg.logAry.length != this.state.timeAry.length) {
			//初始化成功開始緩衝數據
			this.query.current = this.props.mapMsg.logAry.length;
			this.props.dispatch(optionApi(api.getMap, this.query, actionTypes.NEW_MAP))
		}
}

reducer

export function mapMsg(state = {}, action) {
   switch (action.type) {
      case actionTypes.ORG_MAP:
         return action.data;
      case actionTypes.NEW_MAP:
         state.logAry.push(...action.data.logAry);
         action.data.logAry = state.logAry;
         return action.data;
   }
   return state;
}

原因：在reducer時將原來state的值也進行了修改

解決方案如下

export function mapMsg(state = {}, action) {
   switch (action.type) {
      case actionTypes.ORG_MAP:
         return action.data;
      case actionTypes.NEW_MAP:
         let newLogAry = [...state.logAry];
         newLogAry.push(...action.data.logAry);
         action.data.logAry = newLogAry;
         return action.data;
   }
   return state;
}