时间戳

首页 > 解决方案 > 用 useEffect 替换 getDerivedStateFromProps

javascript - 用 useEffect 替换 getDerivedStateFromProps

问题描述

我正在将类组件转换为函数组件，并想看看是否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 ])

标签： javascriptreactjsreact-hooks

解决方案

你应该检查文档

您可以拥有上一个path和当前的状态，path并且仅setLoginStatus在它们不同时调用。

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

这部分代码只会在path更改时运行。发生这种情况是因为[ path ].

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

如果你使用一些路由器，你的效果可能只会在初始渲染中运行。

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

不，没关系，你应该这样做

也看看你可能不需要派生状态

在这里

推荐阅读