Не могу использовать useEffect на styleled-компонент - PullRequest
Новая
       10

Не могу использовать useEffect на styleled-компонент

0 голосов
/ 28 апреля 2020

Можно ли сделать стилизованный компонент из компонента с помощью крючков? Мне постоянно говорят, что:

React Hook «useState» вызывается в функции «rawFoodList», которая не является ни компонентом функции React, ни пользовательской функцией React Hook 

import React, { useEffect } from 'react';
import styled from 'styled-components';
import FoodListItem from '../molecules/FoodListItem';

const rawFoodList = ({className}) => {
    const [foodList, setFoodList] = useState([]);

    useEffect(() => {
        async function fetchFoodList() {
            const res = await fetch('api-url');
            res.json()
                .then(res => setFoodList(res))
                .catch(err => console.log(err));

            console.log(foodList);
        }

        fetchFoodList();
    })

    return (
        <ul className={className}>
            {foodList.map((food, index) => <FoodListItem key={index} food={food} />)}
        </ul>
    );
}

const FoodList = styled(rawFoodList)`
    width: 100%;
    margin: 0;
    padding: 0;
`;

export default FoodList;
...