Question

以下（虽然人为设计）组件违反了react-hooks / rules-of-hooks（通过eslint）

library(data.table)

data <- data.table(building = c("Alex", "Alex", "Mike"),
               population = c(1312, 3123, 2139),
               location = c("Denver", "Arizona", "Detroit"))

   building population location
1:     Alex       1312   Denver
2:     Alex       3123  Arizona
3:     Mike       2139  Detroit

，出现以下错误 data[, popsum := sum(population), by = building][] building population location popsum 1: Alex 1312 Denver 4435 2: Alex 3123 Arizona 4435 3: Mike 2139 Detroit 2139

我知道钩子need to be called in the same order，但是这种条件渲染（只要在返回之前不调用任何钩子，就不会阻止钩子以相同的顺序被调用。我认为{{3 }}过于严格，但也许有更好的方法。

有条件地渲染使用挂钩的组件的最佳方法是什么？

Answer 1

您不能有条件地使用挂钩，因此请将挂钩移到条件上方。

function Apple(props){
  const {seeds} = props;
  const [bitesTaken, setBitesTaken] = useState(0);
  if(!seeds){
    return null;
  }
  return <div>{bitesTaken}</div>
}

您还可以像这样简化渲染：

function Apple(props) {
  const { seeds } = props
  const [bitesTaken, setBitesTaken] = useState(0)
  return !!seeds && <div>{bitesTaken}</div>
}

如果seeds为假，则将返回false（不显示任何内容），否则，将返回div。

我在seeds中添加了双感叹号，将其转换为布尔值，因为如果seeds为undefined，则渲染中不会返回任何内容，React会引发错误。 / p>

Answer 2

另一种选择是拆分组件。

import React,{useState} from 'react';

const Apple = (props) => {
    const {seeds} = props;
    return !!seeds && <AppleWithSeeds />;
};

const AppleWithSeeds =(props) => {
    const [bitesTaken] = useState(0);
    return <div>{bitesTaken}</div>
};

export default Apple;

此方法的优点是您的组件很小且合乎逻辑。

在您的情况下，useState初始化程序中的内容可能会大于'0'，而您不想在条件之前的顶部出现不必要的内容。

如何有条件地渲染使用钩子的React组件

2 个答案: