Реагировать на изменение состояния пользовательских хуков, но использовать эффект, а не рендеринг - PullRequest
Новая
       6

Реагировать на изменение состояния пользовательских хуков, но использовать эффект, а не рендеринг

0 голосов
/ 06 февраля 2020

Я создаю пользовательский хук для обновления состояния фильтра, который используется двумя компонентами.

Даже при добавлении фильтра в качестве зависимости от эффекта useEffect другой компонент не принимает изменение состояния. Почему это происходит?

, позже отредактируйте: я строю библиотеку, в которой я хочу, чтобы мои пользователи использовали компоненты библиотеки без особой заботы о перемещении реквизита к нужному компоненту. Я хочу, чтобы это работало из коробки без необходимости определять это.

Вот мой код:

Пользовательский хук: 

export default function SharedFilter() {
    const [filter, setFilter] = useState({filter: "Last 24 hours"});

    function setTheFilter(newFilter){
        setFilter({filter: newFilter.filter});
    }

    return [filter, setTheFilter];
}

Компонент, который меняет фильтр: 

export default function TimeFilter() {

    const [filter, setFilter] = SharedFilter();

    return(
        <div>
            <select id="timeFilter" onChange={(event) => {
                setFilter({filter : event.target.value})
            }}>
                <option value="Last 24 hours">Last 24 hours</option>
                <option value="Last 48 hours">Last 48 hours</option>
                <option value="Last week">Last week</option>
                <option value="Last Month">Last Month</option>
                <option value="Last Year">Last Year</option>
            </select>
        </div>
    );
}

Это компонент что useEffect не работает: 

export default function Chart() {

    const [filter, setFilter] = SharedFilter();

    useEffect(() => {
    }, [filter.filter]);

    return (
        <div>
            {filter.filter}
        </div>
    );
}

Ответы [ 2 ]

2 голосов
/ 06 февраля 2020

Хуки не являются angular сервисами - они не разделяют состояние. Вы не можете использовать setFilter в одном компоненте и использовать filter в надежде получить то же значение в другом компоненте. Для этого вам следует использовать контекст или передавать его в реквизитах.

Кстати, вы должны использовать префиксы своих пользовательских хуков, так что useSharedFilter

0 голосов
/ 06 февраля 2020

Если используется глобальный контекст данных, используйте useContext , поэтому вам не нужно настраивать новый хук.

...