Question

根据React，您只应该在函数内部调用一个钩子。

但是在某些时候，我想我想将这个钩子的输出包含在一个调用该函数的组件中。

所以我正在尝试执行以下操作

select 
  A.Col1,
  A.Col2,
  A.Col3,
  A.Col4,
  A.Col5,
  MIN(A.Col6)
FROM 
  MyTable A
INNER JOIN
  (SELECT
    B.Col1,
    B.Col2,
    B.Col3,
    B.Col4,
    MIN(B.Col5) AS "Col5"
  FROM
    MyTable B
  INNER JOIN 
    (SELECT     
      Col1,
      Col2,
      Col3,
      MIN(Col4) AS "Col4"
    FROM    
      MyTable
    GROUP BY    
      Col1,
      Col2,
      Col3) C
  ON 
    B.Col1 = C.Col1
    AND B.Col2 = C.Col2
    AND B.Col3 = C.Col3
    AND B.Col4 = C.Col4
  GROUP BY 
    B.Col1,
    B.Col2,
    B.Col3,
    B.Col4 ) D
ON 
  D.Col1 = A.Col1
  AND D.Col2 = A.Col2
  AND D.Col3 = A.Col3
  AND D.Col4 = A.Col4
  AND D.Col5 = A.Col5
GROUP BY 
  A.Col1,
  A.Col2,
  A.Col3,
  A.Col4,
  A.Col5

和

class AreaOfInterestSelector extends Component<IProps> {
    render() {
        const areas: object = GetAreasOfInterest();
        console.log(areas);
        return <React.Fragment>
            {this.props.noSelectionMessage}
        </React.Fragment>
    }
}

但是我最终得到了错误

const GetAreasOfInterest = () => {
    const [areas, setAreas] = useState({});
    const categoryApi = '//example.org/api/category';
    const getCategories = async () => {
        const data = await Axios.get(categoryApi);
        return data;
    }
    useEffect( () => {
        const data = getCategories();
        setAreas(data);
    });

    return areas;
}

export default GetAreasOfInterest;

检查我的顶级依赖项之前，我没有不匹配的版本或一个或多个副本，然后仔细检查所有内容并发现我想问一下，因为我敢打赌，我在这里犯了一个愚蠢的错误。

Answer 1

根据React，您只能在函数 component 内调用一个钩子。您是在函数而不是函数组件中使用钩子。

要使其成为组件，应返回一个元素，并将其用作组件。就像这样（考虑到您正在返回一个元素）：

<GetAreasOfInterest/>

如何使React钩子返回组件

1 个答案: