Question

我有一个react-redux应用程序，有thunk＆amp;路由器

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

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

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

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

如果它有所不同，这个^ render方法将获取从容器元素向下传递的props。它的直接父级使用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工作，并且新状态对象看起来应该如此。进入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
  }
}

Answer 1

这是反应动作StaggeredMotion

的限制

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

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

React-Redux状态更新StaggeredMotion呈现错误

1 个答案: