当按属性/属性名称而不是通用"props"指定时，React (打字稿)属性数据显示为未定义

Question

首先要指出的是，Typescript对我来说是全新的，我还在开发react。

所以我要做的是映射我从Firestore查询的文档的名称列表，以显示在web上。问题是首先，我得到的错误是，在我的函数上有一个未捕获的承诺来查询文档(特别是在where()函数中)，我已经检查了很多次，找不到问题。

第二个也是最令人困惑的问题是，我可以console.log只是很好地在子组件中的道具，但如果我指定的道具。标题显示为未定义，尽管我可以清楚地看到它显示得很好。

RoomListContainer文件:

const RoomListContainer = (props: Props) => {
    const styles: Styles = {
        container:
            'bg-purple-200 rounded-2xl ml-4 overflow-y-auto overflow-x-hidden scrollbar scrollbar-thumb-purple-500 scrollbar-track-purple-300 hover:scrollbar-thumb-purple-400 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-track-rounded-full',
    };
    const [userRooms, setUserRooms] = useState<any>([]);
    const [update, setUpdate] = useState(false);
    const [isLoading, setIsLoading] = useState(true);
    const { currentUser } = useContext(UserContext);
    useEffect(() => {
        return () => {
            GetRooms();
        };
    }, [, update]);
    const refreshRooms = () => {
        setUpdate((prevState) => !prevState);
    };
    const GetRooms = async () => {
        const roomsRef = collection(db, 'Rooms');
        const userRoomsQuery = query(
            roomsRef,
            where('users', 'array-contains', currentUser.uid) // <- Uncaught promise error saying there is undefined data even tho console logging gives me all data just fine
        );
        // console.log(userRoomsQuery);
        const querySnapshot = await getDocs(userRoomsQuery);
        !querySnapshot
            ? console.log('No Data')
            : setUserRooms(querySnapshot.docs.map((doc: any) => doc.id));
        setTimeout(() => setIsLoading(false), 700);
    };
    // console.log(userRooms);
    return (
        <div className={styles.container}>
            {isLoading ? (
                <p>Loading Rooms...</p>
            ) : (
                userRooms.map((room: any) => (
                    <RoomContainer
                        key={Math.random() * 9}
                        data-title={room}
                    />
                ))
            )}
        </div>
    );
};

子组件RoomContainer:

const RoomContainer = (props: Props) => {
    const styles: Styles = {
        selectedRoomBG: 'bg-purple-100 w-[100%] flex flex-col transition',
        unselectedRoomBG:
            'bg-purple-200 w-[90%] rounded-r-full flex flex-col mx-auto',
        topPad: 'bg-purple-200 h-[10px] rounded-br-full transition',
        roomTitle: 'ml-2 w-full text-left hover:text-purple-600',
        bottomPad:
            'bg-purple-200 h-[10px] rounded-tr-full transition border-t-2 border-purple-400',
        bottomPadSelected:
            'bg-purple-200 h-[10px] rounded-tr-full border-t-[1px] border-purple-400 transition',
    };
    const [selectedRoom, setSelectedRoom] = useState(false);
    const [roomTitle, setRoomTitle] = useState();
    const selectRoom = () => {
        setSelectedRoom((prevState) => !prevState);
    };
    // const borderDisplay = selectedRoom ? {styles.bottomPadSelected} : {styles.bottomPad};
    const roomDisplay = (
        <div>
            <div className={styles.topPad} />
            <button className={styles.roomTitle}></button>
            <div className={styles.bottomPad} />
        </div>
    );
    console.log(props.title); // <- Comes up undefined
  console.log(props.data-title); // <- Comes up in IDE as not recognized
    console.log(props); // <- Works
    return (
        <div
            className={
                selectedRoom
                    ? styles.selectedRoomBG
                    : styles.unselectedRoomBG
            }
            onClick={selectRoom}
        >
            {roomDisplay}
        </div>
    );
};
export default RoomContainer;

对正在发生的事情的任何想法或指导将非常感激!

Answer 1

你传递了"data-title"从父组件到子组件，没有"标题"。这就是为什么它没有定义。这里是你需要知道的关于道具的一切另外，您将userRooms键入为"任意"，请考虑实际键入它，因为这是typescript

的主要目的。