为什么功能块内的 useState 值为 null？

Question

我知道这里有一个范围界定问题。 我就是找不到。 为什么searchItems()块中的“items”为空？

export const useStore = () => {
   const [items, setItems] = useState(null)

   const setItemsFromApi = () => {
      //call api to get data, then
      setItems(data)
   }

   const searchItems = (query) => {
      //use the local data and filter based on query
      //'items' IS NULL IN THIS SCOPE
      items.filter(() => {})
   }

   console.log(items) // 'items' HAS UPDATED VALUE AFTER setItemsFromApi() IN THIS SCOPE

   return {setItemsFromApi, searchItems}
}

像这样使用商店。 （注意：我省略了列表中项目的渲染，因为该部分工作正常。只关注为什么 onClick 不使用已加载的项目进行过滤。）

export default function DataList(props) => {     
   const store = useStore();

   useEffect(() => {
      store.setItemsFromApi()
   }, [])
    
   const runSearch = (query) => {
      store.searchItems(query)
   }

   return <button onClick={runSearch('searchTerm')}   
 }

我什至尝试将其作为回调依赖项传递，但它仍然为空

const searchItems = useCallback((query) => {
    //'items' IS STILL NULL IN THIS SCOPE
    items.filter(() => {})
 }, [items])

Answer 1

从您发布的代码中，

const store = useStore() store.setItemsFromApi() ... store.searchItems(query)

问题可能是因为您正在执行异步操作（调用 API），但搜索并未等待 fetch 调用的结果。 所以，当你做

store.searchItems(查询)

, store 为 null 并且仅在稍后更改其值。

Answer 2

简而言之，触发搜索后状态没有刷新，因为当 onChange 事件被触发时，我在组件内运行了一个“去抖动” useRef函数，即使这是一个本地数据搜索。 我猜这中断了重新渲染事件。 因此，当搜索需要 api 调用时，我将 debounce 直接移至 api 服务调用。