React-Redux 状态更新 StaggeredMotion 渲染错误

Question

我有一个 react-redux 应用程序，带有 thunk 和路由器

我正在获取信息，初始获取和呈现工作正常。当客户端过滤信息（过滤在服务器上完成）时，我使用相同的 reducer 进行更新。

在获取新数据时，我的渲染方法在下面的 if 语句中失败：

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

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

如果它有所不同，这个 ^ render 方法正在获取从容器元素传递下来的道具。它的直接父级正在使用 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 日志中我可以看到 fetch 有效，新的状态对象看起来应该如此。正在更新进入反应运动的组件中生成的 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

这是 react-motion 的限制 StaggeredMotion

它只适用于固定长度数组，你可以添加一个key={arr.length}让它重新渲染。

否则默认样式列表将不会更新，因此它正在尝试呈现不再在列表中的元素。

React-Redux 状态更新 StaggeredMotion 渲染错误

React-Redux State Update StaggeredMotion Render Error

immutability

reactjs

redux

react-redux