Question

我知道通常的想法是在didMount / didUnmount中设置一个指标。但这意味着我必须保护每个setState。太冗长了。

一个SpinningButton：

const SpinningButton = props => {

  const [spinning, setSpinning] = useState(false)

  const handleClick = useCallback((evt) => {

    setSpinning(true)

    props.onClick().then(() => {
      setSpinning(false)
    }, err => {
      setSpinning(false)
    })
  })

  return <Button onClick={handleClick} loading={spinning}>Spinning</Button>
}

我在哪里使用

const Page = props => {
  const [hidden, setHidden] = useState(false)
  if (hidden) return null
  return <SpinningButton onClick={() => {
    return fetch("https://...").then(d => {
      setHidden(true)
    })
  }} />
}

Answer 1

如果到了必须在继续前进之前检查组件是否已卸下的地步，则说明您做错了。但是如果没有代码，任何人都无法告诉您哪里出了问题。

但是，您可以通过将setState包裹在另一个函数中来保护自己。

componentDidMount() {
   this.mounted = true;
}

setStateSafe(obj) {
   if (this.mounted) {
      this.setState({obj})
   }
}
// and use setStateSafe insdead of setState in your code everywhere

话虽如此。这是一种抗氧化剂，您应该尽量避免使用它。

详细了解here

在REACT中，是否有更好的方法来识别组件是否已卸载？

1 个答案: