太多的重新渲染。设置状态时

Question

我正在尝试使用带有 typescript 的 expo 制作一个电子商务应用程序，但我在加载我的类别页面时遇到了问题。 有两种方式可以访问分类页面

1. 通过底部导航 - 这个很好用
2. 通过主页上的按钮

尝试根据通过主页传入的参数设置状态，但它给了我太多重新渲染错误。 以下是我目前拥有的代码。

因为第一种方式进入分类页面，所以需要有默认的，我试过放一个条件作为默认分类，但是再次通过首页访问，第二次分类就不会改变了。

export default function CategoryList(props: Props) {
  let { params } = useRoute<StackRouteProp<'Home'>>()

  const [currentCategory, setCategory] = useState({categories: Categories[0]});

  if (params) {
    setCategory({categories: params.categories})
  }
}

Answer 1

您也可以将useEffect 与useRef 一起使用：

export default function CategoryList(props: Props) {
  let { params } = useRoute<StackRouteProp<'Home'>>()

  const [currentCategory, setCategory] = useState({categories: Categories[0]});
  const canSet = useRef(true)

  useEffect(() => {
    if (params && canSet.current) {
      setCategory({ categories: params.categories })
      canSet.current = false
    } else {
      canSet.current = true
    }
  }, [params])

Answer 2

每次调用setCategory，它都会重新渲染组件。然后，每次渲染组件时，如果 params 存在，它将再次调用 setCategory，这将导致另一个渲染，再次调用 setCategory，以此类推，直到达到 React 的渲染限制。

解决此问题的一种可能方法是在第一次之后添加一个布尔值来设置，这将防止它第二次进入 if 块：

const [currentCategory, setCategory] = useState({categories: Categories[0]});
const [hasParamsCategory, setParamsCategory] = useState(false);

if (params && !hasParamsCategory) {
  setCategory({categories: params.categories});
  setParamsCategory(true);
}

这仍然不是完美的，因为通常在渲染期间直接调用状态更改函数不是一个好习惯，但这将作为一种快速而肮脏的解决方法。