反应 Typescript 和 useCallback答案

【问题标题】：React Typescript and useCallback反应 Typescript 和 useCallback
【发布时间】：2020-09-15 13:30:20
【问题描述】：

我正在尝试使用 Typescript 和 useCallback，但我遇到了这个错误

Expected 0 arguments, but got 1

这是我的代码

const searchFriends = useCallback(() => (filterValue: string): void => {
    if (dataState.length <= INITIAL_FRIENDS_API_REQUEST) fetchAllFriends()
    const filterValueInsensitive = filterValue.toLowerCase()
    const filtered = dataState.filter((friend: Friends) => {
      return friend.displayName?.toLowerCase().includes(filterValueInsensitive)
    }) 
    setFriendsDisplayState(filtered)
  }, [dataState,fetchAllFriends]) 

  const handleChangeSearchInput = (
    e: React.ChangeEvent<HTMLInputElement>
  ): void => searchFriends(e.currentTarget.value) // ERROR here "Expected 0 arguments, but got 1"

知道如何解决吗？

【问题讨论】：

标签： reactjs typescript react-hooks usecallback

【解决方案1】：

您正在使用useCallback 语法，例如useMemo's。它不需要柯里化功能。正确的写法是这样的

const searchFriends = useCallback((filterValue: string): void => {
    if (dataState.length <= INITIAL_FRIENDS_API_REQUEST) fetchAllFriends()
    const filterValueInsensitive = filterValue.toLowerCase()
    const filtered = dataState.filter((friend: Friends) => {
      return friend.displayName?.toLowerCase().includes(filterValueInsensitive)
    }) 
    setFriendsDisplayState(filtered)
  }, [dataState,fetchAllFriends])

【讨论】：

很高兴有帮助:-)