React-Redux狀態更新StaggeredMotion渲染錯誤

Question

我有一個帶有React和Redux應用的thunk和路由器

我正在獲取信息，並且初始獲取和渲染工作正常。 當客戶端過濾信息時，我使用相同的reducer進行更新（過濾在服務器上完成）。

在獲取新數據時，我的render方法在下面的if語句處失敗：

const keys = ['key1', 'key2', 'key3', 'key4'];

const els = keys.map((d, i) => {
  if (this.props.item[d] > 0) {
    return (...)
  }
});

如果有所不同，則此^渲染方法將從容器元素中傳遞道具。 它的直接父級使用TransitionMotion渲染元素：

編輯我發現了問題，它似乎沒有在下面的函數中更新demoStyles：

let demoStyles = this.props.demo.map((d, i) => {
  return (
    {right: 100, opacity: 0}
  )
})
return (
  <div style={this.props.config}>
    <StaggeredMotion
    defaultStyles={demoStyles}
    styles={prevInterpolatedStyles => prevInterpolatedStyles.map((_, i) => {
      return i === 0
        ? { right: spring(0), opacity: spring(1)}
        : {
            right: spring(prevInterpolatedStyles[i - 1].right, { stiffness: 700, damping: 35 }), opacity: spring(prevInterpolatedStyles[i - 1].opacity, { stiffness: 700, damping: 35 }),
          };
    })}
  >
    {interpolatingStyles =>
      <article>
        {interpolatingStyles.map((style, i) => {
          const barStyles = {
            right: style.right,
            opacity: style.opacity
          }
          return (<DemoLineItem styleConfig={barStyles} item={this.props.demo[i]} demoName={this.props.demoName} key={'demoLine'+i}/>)
        })}
      </article>
    }
    </StaggeredMotion>
  </div>

從我的redux日志記錄中，我可以看到抓取有效，並且新的狀態對象看起來應該是正確的。 用於響應運動的組件中生成的demoStyles都將被更新，redux的props.demo也將被更新。

但是從我的日志來看，它似乎在Redux中的操作完成之前就開始呈現。 它呈現列表中的第一個元素，然后引發未定義的內容和fetch_completes，這對我來說沒有意義。

我的減速器看起來像這樣：

export function dist(state = [], action) {
    switch (action.type) {
        case 'DIST_FETCH_COMPLETE':

        let demos = Object.keys(action.survey).sort().map((d, i) => 
                    {return {...someConfig object I built...}});

            return {
              ...state,
              dist: action.survey,
              demos
            };
        default:
            return state;
    }
}

編輯：這是我的提取動作

export function fetchDist(url) {
    return (dispatch) => {
        dispatch(distLoading(true));

    fetch(url, {
     method: 'GET',
     headers: { ...}
    }).then((response) => {
            dispatch(distLoading(false));
            return response;
        })
        .then((response) => response.json())
        .then((dist) => dispatch(distFetchComplete(dist)))
        .catch(() => dispatch(distError(true)));
};
}

錯誤真的很簡單：

export function distError(bool) {
  return {
    type: 'DIST_ERROR',
    error: bool
   }
}

export function distLoading(bool) {
  return {
    type: 'DIST_LOADING',
    loading: bool
  }
}

export function distFetchComplete(survey) {
  return {
    type: 'DIST_FETCH_COMPLETE',
    survey
  }
}

Answer 1

這是反應運動的StaggeredMotion的局限性

它僅適用於固定長度的數組，您可以添加key = {arr.length}以使其重新呈現。

否則默認樣式列表將不會更新，因此它將嘗試呈現列表中不再存在的元素。