Question

这个问题类似于 this one，我只是试图从我的 redux 存储中检索错误状态，并在第一次渲染时在组件内的嵌套函数中进行渲染。现在，它只会在第二次渲染时更新。

因此，我试图解决这个问题并创建一个自定义钩子，它从存储中检索错误状态，然后相应地使用它。到目前为止，这些是我的文件：

useError.js

import { useSelector } from "react-redux"

export const useError = () => {
  const error = useSelector(state => state.error)

  return error
}

然后我尝试在我的 mainComponent 中使用它：

MainComponent.js

const MainComponent = () => {
  const error = useError()
  console.log(error) // This shows the correctly updated error state
    
  const nestedMethod = () => {
    console.log(error) // This shows an older version of the state on the first render, and only correctly updates on the second render
    if (error === false) {
      <Snackbar 
        ancorOrigin{{vertical: "top"}}
        autoHideDuration={2000}
      > 
        Messaged saved successfully
      </Snackbar>
    } else {
      <Snackbar 
        ancorOrigin{{vertical: "top"}}
        autoHideDuration={2000}
      > 
        There was an error. Please try saving again.
      </Snackbar>
    }
  }
}

我对 useSelector() 的这个概念感到非常困惑，它只能在下一个渲染周期的嵌套方法中正确更新。对我来说，这使 Redux 的全部意义无效，因为您当时没有使用状态的实时视图。

无论如何，当我使用自定义钩子时，为什么会发生同样的行为？

编辑

更新了 nestedMethod 以大致展示其功能。问题是，即使在 error === true 时，第一次渲染也会显示成功消息，并且只在第二次渲染周期显示错误消息。

自定义钩子在第二次渲染之前不会更新组件内的功能

0 个答案: