Question

我正在将类组件转换为功能组件，并想看看useEffect()是否可以替换以下静态函数

static getDerivedStateFromProps(props) {
    const { path } = props.match;
    if (path === '/login') {
      return { loginStatus: true };
    } else {
      return { loginStatus: false };
    }
  }

以下是新的替换功能。它正在做应该做的事情，即根据道具更改状态，但是我对useEffect（）不太熟悉，我只是想知道我是否不会因转换为它而丢失任何东西。

const { path } = props.match
useEffect(() => {
    if (path ==='/login'){
        setLoginStatus(true)
    } else {
    setLoginStatus(false)
    }
}, [ path ])

Answer 1

您应检查docs

您可以为先前的path和当前的path设置状态，并且仅在它们不同时才调用setLoginStatus。

如果您只想在setLoginStatus(true)时path == 'login'，那么使用useEffect是正确的。

这部分代码仅在path更改时运行。发生这种情况的原因是[ path ]。

useEffect(() => {
    if (path ==='/login'){
        setLoginStatus(true)
    } else {
    setLoginStatus(false)
    }
}, [ path ])

如果您使用某些路由器，则效果可能只会在初始渲染中运行。

我只是想知道我是否通过转换为这个而不会丢失任何东西。

不，很好，这就是您应该这样做的方式

还可以看看You Probably Don't Need Derived State

还有here

用useEffect代替getDerivedStateFromProps

1 个答案: