如何将反应钩子返回到组件中

Question

根据 React 的说法，你只应该在函数内部调用一个钩子。

但是在某些时候，我想我会希望将该钩子的输出放在调用该函数的组件中。

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

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;

但我最终得到错误

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

检查我的顶级依赖项我没有不匹配的版本或多个副本，在浏览所有内容并查看之前，我想我会问，因为我敢打赌我刚刚在这里犯了一个愚蠢的错误。

Answer 1

根据 React 的说法，你只应该在函数组件内部调用一个钩子。您在函数内部使用钩子，而不是函数组件。

要使它成为一个组件，它应该返回一个元素，并将其用作组件。所以它会是这样的(考虑到你正在返回一个元素(：

<GetAreasOfInterest/>