javascript - TypeError：room.map 不是函数：ReactJS

Question

我目前正在ReactJs制作一个聊天系统，让一些非洲学生能够在匿名环境中相互谈论心理健康问题。我有一个小名称输入，我目前正在尝试创建一个选择选项，以便这些主题可以显示，并且可以在聊天系统上进行过滤，但我很难让它真正呈现，它不断崩溃并说TypeError: room.map is not a function。

const [room, setRoom] = useState([
    { label: "Depression", value: "Depression" },
    { label: "Anxiety", value: "Anxiety" },
    { label: "Chat", value: "Chat" }
  ]);

<select className="joinInput mt-20"  onChange={(event) => setRoom(event.currentTarget.value)}>
        {room.map(rooms => (
        <option
          key={rooms.value}
          value={rooms.value}
        >
          {rooms.label}
        </option>
          ))}
          </select>

标签： javascriptarraysreactjsfunction

Answer 1

解决方案：

const [currentRoom, setCurrentRoom] = useState()
const [room] = useState([
  { label: "Depression", value: "Depression" },
  { label: "Anxiety", value: "Anxiety" },
  { label: "Chat", value: "Chat" },
]);

return (
  <select
    className="joinInput mt-20"
    onChange={(event) => setCurrentRoom(event.currentTarget.value)}
    value={currentRoom}
    >
    <option value="">Select value...</option>
    {room.map((rooms) => (
      <option key={rooms.value} value={rooms.value}>
        {rooms.label}
      </option>
    ))}
  </select>
);