**已关闭。**此问题为not reproducible or was caused by typos。当前不接受答案。

这个问题是由打字错误或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic，但这个问题的解决方式不太可能帮助未来的读者。
4天前关闭。
Improve this question

import { useState } from 'react';

export default function BookingPage() {
    const [firstname, setFirstName] = useState("");
    const [lastname, setLastName] = useState("");
    const [numofguests, setNumOfGuests] =  useState(0);
    const [date, setDate] = useState();
    const [availabletimes, setAvailableTimes] = useState(['6:00pm', '7:00pm', '8:00pm', '9:00pm', '10:00pm']);

    const checkDate = (e) => {
        setDate(e.target.value)
        console.log(date)
    }

    return(
        <>
        <form>
            <div>
                <label htmlFor="name">Name</label>
                <input
                    value={firstname}
                    onChange={(e)=>{setFirstName(e.target.value)}}
                    type="text"
                    id="name"
                    required
                ></input>
                <label htmlFor="lastname">Last Name</label>
                <input
                    value={lastname}
                    onChange={(e)=>{setLastName(e.target.value)}}
                    type="text"
                    id="lastname"
                    required
                ></input>
            </div>
            <div>
                <label htmlFor="date">Date</label>
                <input
                    value={date}
                    onChange={checkDate}
                    type="date"
                    id="date"
                ></input>
            </div>
            <div>
                <label htmlFor="time-res"></label>
                <select
                    multiple={true}
                    value={availabletimes}
                    onChange={(e) => {setAvailableTimes(e.target.value)}}
                    id="time-res"
                >
                    <option>Choose a time!</option>
                    {availabletimes.map((timeoption) => {
                        return (<option >{timeoption}</option>)
                    })}
                </select>
            </div>

            <div>
                <label htmlFor="numOfGuests">Number of Guests</label>
                <input
                    value={numofguests}
                    onChange={(e)=>{setNumOfGuests(e.target.value)}}
                    id="numOfGuests"
                    type="number"
                    min="1"
                    max="10"
                ></input>
            </div>
            <div>
                <label htmlFor="occasion">Dropdown</label>
                <select id="occasion">
                    <option>Birthday</option>
                    <option>Birthday</option>
                </select>
            </div>
            <input type="submit"></input>
        </form>
        </>
    );
};

上面我有一个可用时间的数组。我将数组选项Map到选项标签中。当我尝试单击其中一个选项时，会出现TypeError，说“availabletimes.map不是一个函数”。基本上，我希望它这样，select标签的行为方式就像我手动放入每个选项标签一样。