Как предотвратить бесконечные вызовы функции в хуке useEffect?

Question

Есть состояние:

const [opNames, setOpNames] = useState(
        props.brand.map((item) => {
            return { checked: false, name: item, id: item };
        })
    );

В пропсе бренд содержится массив, который парсится в объект. Мне нужно его обновить с помощью хука useEffect, но такой вариант:

useEffect(() => {
            setOpNames(props.brand.map((item) => {
                return {checked: false, name: item, id: item};
            }));
    });

или оборачивание в функцию приводят к бесконечным вызовам. Как сделать так, чтобы состояние обновлялось только 1 раз?

P.s. - Попробовал сделать вот так:

useEffect(() => {
            function newData () {
                let brand = props.brand;
                setOpNames(brand.map((item) => {
                    return {checked: false, name: item, id: item};
                }));
            }
            newData();
    }, [props.brand]);

Но получаю страшные высыпания в консоли, значения которых не понимаю:

Хоть по факту все и работает, я бы предпочел это убрать.

Answer 1

Ну ошибка не связана с хуком, если вам нужно отслеживать brend, передавайте вторым параметром в useEffect [props.brand]. Если надо просто один раз выполнить при монтаже компонента передайте пустой массив [].

Скорее у вас тут бардак

setOpNames(props.brand.map((item) => { return {checked: false, name: item, id: item}; }));

БЛОГ НА HUSL

Как предотвратить бесконечные вызовы функции в хуке useEffect?

Ответы (1 шт):