每次更新搜索词值时，如何在应用程序组件外部实现的 useEffect 挂钩执行?

Question

自定义钩子"useSemiPersistenceState"在App组件之外实现，包括useEffect钩子

const useSemiPersistentState = (key, initialState) => {  
const [value, setValue] = React.useState(localStorage.getItem(key) || initialState); 
React.useEffect(
() => {
localStorage.setItem(key, value); 
},
[value, key],
);
return [value, setValue]; 
};

自定义钩子在 App 组件第一次挂载时只执行一次，那么本地存储如何设置 SearchTerm 的新值(来自输入字段(当它被 setSearchTerm 更新时呢？

const App = () => {
const [searchTerm, setSearchTerm] = useSemiPersistentState('search', 'React');

const handleSeach = (event) => {                
setSearchTerm(event.target.value); 
};
...
}

Answer 1

当组件首次加载时，初始状态在"value"变量中传递，并且相同的状态也存储在本地存储中。这里的"值"基本上是您将要使用的搜索关键字，因此在第二个代码段中调用usePersistentState((时，其初始值设置为"react"。但在同一行上也是数组解构的一个例子。因此，当 setSearchTerm 被称为片段 2 时，"value"变量在 usePersistentState 中更新，并且 useEffect 被触发，因为如果"value"变量发生变化并且在本地存储中得到更新，则会触发 useEffect。

简而言之，当usePersistentState被调用或触发时，"value"变量是searchTerm，因此整个流程都在该前提下工作。