我有以下动作创建者:

export function scrolltoNextItem(item) {
  return (dispatch, getState) => {
    dispatch(appendItem(Item));
    dispatch(
      scrollToNextIndex(
        getState().items.length - 1
      )
    )
  }
}

问题是在appendItem完成之前运行scrollToNextItem次,滚动位置最终不正确.我可以通过添加setTimeout来证明这一点,使脚本的执行在运行scrollToNextItem之前等待下一个滴答声:

export function scrolltoNextItem(item) {
  return (dispatch, getState) => {
    dispatch(appendItem(Item));
    setTimeout(() => {
      dispatch(
        scrollToNextIndex(
          getState().items.length - 1
        )
      )
    }, 0);
  }
}

我怎么能等到appendItem个动作结束呢?在standard react land中,我只使用setState回调:

this.setState({something: 'some thing'}, () => {
  console.log('something is set');
});

dispatch不提供任何回调功能.

推荐答案

你可以把appendItem包装成一个promise,并把dispatch作为参数传递给它

const appendItem = (item, dispatch) => new Promise((resolve, reject) => {
  // do anything here
  dispatch(<your-action>);
  resolve();
}

然后你可以从scrolltoNextItem开始这样称呼它

export function scrolltoNextItem(item) {
  return (dispatch, getState) => {
    appendItem(Item, dispatch).then(() => {
      dispatch(
        scrollToNextIndex(
          getState().items.length - 1
        )
      )
    })
  }
}

Reactjs相关问答推荐

未捕获的类型错误:类型Orbitum创建者未定义

全局上下文挂钩-替代不起作用

FireBase未与Reaction应用程序连接

在 React 中使用forwardRef时无法声明自定义属性

Mui 在 TextField 标签上添加工具提示显示两个工具提示框

如何在 React 中停止嵌套 Link 和 Button 组件的事件传播?

redux 工具包使用中间件构建器函数时,必须返回一个中间件数组

卸载 React 组件时未清除本地存储项目

onChange in useEffect 的最佳实践

使用登录保护 React 中的 SPA 应用程序 - 为什么这种方法不起作用?

在按钮单击中将动态参数传递给 React Query

我可以更改 styled() 中的响应吗? (MUI v5)

如何在不重新加载页面的情况下加载新添加的数据?

从一个获取 axios 请求(ReactJS)中删除默认参数

如何通过 Material ui select 使下拉菜单下拉

如何使用 babel 将 SVG 转换为 React 组件?

网格项不缩小以适应包含的可滚动列表

在视图列表上react 本机无限循环的反弹动画?

为什么我不能使用 formik 更改此嵌套对象中的值

运行开发服务器时如何为 Vite 指定运行时目录