反应自定义钩子状态改变但使用效果不重新渲染

Question

我构建了自定义钩子来更新两个组件之间共享的过滤器状态。

即使将过滤器添加为对 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>
    );
}

Answer 1

Hooks 不是一个有角度的服务——它们不共享一个状态。 您不能在一个组件中使用setFilter并使用filter希望在另一个组件中获得相同的值。 为此，您应该使用上下文或在道具中传递它。

顺便说一句，你应该在自定义钩子useSharedFilter加上 use 前缀，所以useSharedFilter

Answer 2

如果是 globla 数据，则通过useContext使用上下文，因此您无需自定义新挂钩。