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

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

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

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

Answer 2

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

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

React custom hooks state change but useeffect not rerendering

reactjs

react-hooks

use-effect