Reactjs 反应自定义挂钩状态更改，但useeffect不重新提交

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

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

导出默认函数TimeFilter（）{
const[filter，setFilter]=SharedFilter（）；
返回(
{
setFilter（{filter:event.target.value}）
}}>
过去24小时
最后48小时
上周
上个月
去年
);
}

这是useEffect不起作用的组件：

export default function Chart() {

    const [filter, setFilter] = SharedFilter();

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

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

导出默认功能图（）{
const[filter，setFilter]=SharedFilter（）；
useffect（（）=>{
}，[filter.filter]）；
返回(
{filter.filter}
);
}

挂钩不是角度服务-它们不共享状态。不能在一个组件中使用

setFilter

，而在另一个组件中使用

filter

希望获得相同的值。为此，您应该使用上下文或在道具中传递它

---

顺便说一句，您应该在自定义钩子前面加上use，因此

useSharedFilter

钩子不是角度服务-它们不共享状态。不能在一个组件中使用

setFilter

，而在另一个组件中使用

filter

希望获得相同的值。为此，您应该使用上下文或在道具中传递它

---

顺便说一句，你应该在你的自定义钩子前面加上use，这样如果它是一个globla数据使用上下文，你就不需要自定义一个新钩子了

如果是globla数据，则通过useContext使用上下文，这样就不需要定制新的钩子

谢谢你的回答。在道具中传递它是什么意思？您可以使用一个保存状态的父组件，将setFilter传递给

TimeFilter

，并将filter传递给

Chart

。例如，

。获取它

函数SharedFilter（{setFilter}）{

。我正在构建一个库。我不希望用户需要定义这些道具。我需要它开箱即用，而不需要用户定义这些道具。有什么方法可以做到这一点吗？谢谢你的回答。什么意思？在道具中传递它？你可以使用一个父组件来保存状态，并将setFilter传递给

TimeFilter

并过滤到

图表

。例如，

。要获得

函数共享过滤器（{setFilter}）{

。我正在构建一个库。我不希望用户需要定义那些道具。我需要它开箱即用，而不需要用户定义那些道具。有什么方法可以做到这一点吗？