Как получить возврат реакционного крючка в компонент - PullRequest
Новая
       14

Как получить возврат реакционного крючка в компонент

0 голосов
/ 05 июня 2019

Согласно 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

Проверка моих зависимостей верхнего уровня. У меня нет несовпадающих версий или более одной копии, прежде чем все просмотреть и посмотреть, я решил спросить, потому что держу пари, что только что допустил глупую ошибку.

1 Ответ

0 голосов
/ 05 июня 2019

Согласно React, вы должны вызывать только хук внутри функции component . Вы используете хуки внутри функции, а не компонент функции.

Чтобы он был компонентом, он должен возвращать элемент и использовать его как компонент. Так было бы так (учитывая, что вы возвращаете элемент): 

<GetAreasOfInterest/>
...