為什么功能塊內的 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 服務調用。