React typescript将函数作为prop传递，并从子组件调用

Question

我将一个函数传递给子组件，该子组件管理父组件中的状态。它接受一个在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} />

这是我的子组件代码，我告诉(或试图)组件，该函数将接受朋友参数并返回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);
};

Answer 1

你需要把它改成

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

或

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

Answer 2

组件的第一个参数是一个对象，它包含传入的props，你必须从props对象中获取它，例如:

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