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

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

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

Answer 2

如果它是globla数据，请使用上下文，而不要通过 useContext ，因此您不需要自定义新的挂钩。

反应自定义钩子状态更改，但useeffect不重新呈现

2 个答案: