此表达式不可调用。并非所有类型为'string的成分((searchTerm:string)=>Promise<void>)[]'是可调用的

html5 • • 问答

我有这样的自定义useResults钩子

import { useEffect, useState } from 'react';
import yelp from '../api/yelp';

export default () => {
  const [results, setResults] = useState([]);
  const [errorMessage, setErrorMessage] = useState('');

  const searchApi = async (searchTerm:string) => {
    console.log('Hi there!');
    try {
      const response = await yelp.get('/search', {
        params: {
          limit: 50,
          term: searchTerm,
          location: 'san jose'
        }
      });
      setResults(response.data.businesses);
    } catch (err) {
      setErrorMessage('Something went wrong');
    }
  };

  useEffect(() => {
    searchApi('pasta');
  }, []);

  return [searchApi, results, errorMessage];
};

在我的搜索屏幕中，我导入我的自定义钩子并进行这样的解构

const [searchApi, errorMessage, results ] = useResults();

但是我不能像下面这样从 JSX 代码调用我的 searchApi 方法（我可以调用errorMessage和results）。

<SearchBar term={term} onTermChange={setTerm} onTermSubmit={()=>searchApi(term)}/>

我收到这个错误

此表达式不可调用。并非所有类型为 'string | 的成分| ((searchTerm: string) => Promise) | never[]' 是可调用的。“字符串”类型没有调用签名

如何将“ searchApi ”函数传递给“ SearchBar ”组件中的“ onTermSubmit ”道具？如您所见，“ searchApi ”是一个异步函数

下面是我的 package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@types/axios": "^0.14.0",
    "axios": "^0.21.1",
    "expo": "~40.0.0",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.0",
    "react-native-web": "~0.13.12",
    "react-navigation": "^4.4.3",
    "react-navigation-stack": "^2.10.2"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-dom": "~16.9.8",
    "@types/react-native": "~0.63.2",
    "typescript": "~4.0.0"
  },
  "private": true
}

下面是我的 tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react-native",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "noEmit": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "strict": true
  }
}

回答

仅供参考，为了将元素保留在数组中以保持位置而不允许tsc推断事物，您可以通过设置将其设置为固定as const：

return [searchApi, results, errorMessage] as const;

以上是此表达式不可调用。并非所有类型为'string的成分((searchTerm:string)=&gt;Promise&lt;void&gt;)[]'是可调用的的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>