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

【问题标题】：React-Redux State Update StaggeredMotion Render ErrorReact-Redux 状态更新 StaggeredMotion 渲染错误
【发布时间】：2018-10-03 01:24:25
【问题描述】：

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

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

在获取新数据时，我的渲染方法在下面的 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 日志中，我可以看到 fetch 有效，并且新的 state 对象看起来应该如此。进入 react-motion 的组件中生成的 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
  }
}

【问题讨论】：

为调用 api 和调度 DIST_ERROR 等的操作添加代码
我不明白你为什么把greened 排除在外。
如果我能在这里知道undefiend是什么就很容易理解和调试了
@AjayGaur 这是我不能分享的变量名。 Undefined 是它应该从 fetch 中呈现的下一个对象，它正在替换旧列表。我不明白为什么是undefined，因为它应该试图渲染一些不存在的东西
@AjayGaur 澄清一下，这是第一个渲染方法中的 key1、key2、key3、key4，在第二个对象的 key1 上失败

标签： reactjs redux react-redux immutability

【解决方案1】：

这是 react-motion 的 StaggeredMotion 的限制

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

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

【讨论】：