将打字稿传递函数作为道具反应并从子组件调用答案

【问题标题】：React typescript passing function as prop and calling from child component将打字稿传递函数作为道具反应并从子组件调用
【发布时间】：2021-08-25 15:46:33
【问题描述】：

我将一个函数传递给子组件，该子组件管理我在父组件中的状态。它接受一个在 FriendListItem 中声明的对象，并将其作为新对象设置到数组中。我一直在研究，但无法弄清楚。

interface FriendListItem {
  id: number;
  name: string;
  address: string;
}

功能

 const [friendList, setFriendList] = useState<FriendListItem[]>([]);

  const addToFriendList = (friend: FriendListItem): void => {
    setFriendList((prevstate) => [...prevstate, friend]);
  };

我将它传递给子组件

<UserDetail addFriend={addToFriendList} />

这是我的子组件代码，我正在告诉（或尝试）该组件，该函数将获取朋友 arg 并返回 void。但是当我把它传入时，我得到一个错误

This expression is not callable.
  Type 'FuncProps' has no call signatures.ts(2349)

代码：

interface FriendListItem {
  id: number;
  name: string;
  address: string;
}

interface FuncProps {
  addFriend: (friend: FriendListItem) => void;
}

const UserDetail = (addFriend: FuncProps) => {
  const { userId } = useParams<UserIdParams>();
  const { data, done } = useFetchOne(
    `https://jsonplaceholder.typicode.com/users/${userId}`
  );

  const handleClick = () => {
    const friend: FriendListItem = {
      id: data!.id,
      name: data!.name,
      address: data!.address.street,
    };
    addFriend(friend);
  };

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

你需要把它改成

const UserDetail = ({addFriend}: FuncProps) => { ... }

或

const UserDetail: React.FC<FuncProps> = ({addFriend}) => { .... }

【讨论】：

【解决方案2】：

你的组件的第一个参数是一个对象，其中包含传递的道具，你必须从道具对象中获取它，例如：

interface UserDetailProps {
   addFriend: FuncProps
}

connst UserDetail: FC<UserDetailProps> = ({addFriend}) => {...}

【讨论】：