按钮重载问题答案

【问题标题】：Button Overloading Issue按钮重载问题
【发布时间】：2020-05-12 13:55:22
【问题描述】：

早些时候，我在另一个函数 getFriendId 中调用了我的 addFriend函数（运行 graphql 突变）。它工作得很好。

 const getFriendId = React.useCallback(
    (data: UsersLazyQueryHookResult) => {
      if (data) {
        if (data.users.nodes.length == 0) {
          Alert.alert('User Not Found');
        } else {
          setUserData(data);
          setNumberOfUsers(data.users.nodes.length);
          //showUsers(data, Number(numberOfUsers));
          //addFriend(Number(data.users.nodes[0].id));
        }
      }
    },
    [addFriend],
  );

但是，现在我从 ShowUsers 函数中调用它，该函数首先显示所有返回的用户并为每个用户显示一个按钮。我正在尝试这个：

const showUsers = React.useCallback(
     (data: UsersLazyQueryHookResult, numberOfUsers: Number) => {
       for (var i = 0; i < numberOfUsers; i++) {
         const userId = data.users.nodes[i].id;
         const userName = data.users.nodes[i].firstName
           .concat(' ')
           .concat(data.users.nodes[i].lastName);
         return (
           <View >
             <View >
               <Text >{userName}</Text>
               <Button  
               onPress={addFriend(Number(data.users.nodes[0].id))}
               >
               </Button>
             </View>
           </View>
         );
       }
     },
     [createUserRelationMutation],
   );

但是，我在按钮的 onPress 上遇到问题：

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<Button>): Button', gave the following error.
    Type 'void' is not assignable to type '(() => void) | undefined'.
  Overload 2 of 2, '(props: Button, context?: any): Button', gave the following error.
    Type 'void' is not assignable to type '(() => void) | undefined'.ts(2769)

这是我的 addFriend 函数：

  const addFriend = React.useCallback(
    (id: Number) => {
      createUserRelationMutation({
        variables: {
          input: { relatedUserId: id, type: RelationType.Friend, userId: 7 },
        },
      });
    },
    [createUserRelationMutation],
  );

这就是我在主要返回 jsx 中使用showUsers的方式

 {showUsers(userData, Number(numberOfUsers))}

【问题讨论】：

标签： javascript reactjs typescript react-native react-hooks

【解决方案1】：

onPress={addFriend(Number(data.users.nodes[0].id))} 这将在没有onPress 的情况下调用addFriend 函数：

所以改变：

onPress={addFriend(Number(data.users.nodes[0].id))}

收件人：

onPress={() => addFriend(Number(data.users.nodes[0].id))}

【讨论】：