当我发送一个函数时，React应用变成空白

Question

我正在尝试制作一个智能家居应用程序，用户可以在其中添加房间到他的房子等…每当我尝试发送一个函数，通过props将一个新对象(房间)添加到一个对象的钩子(在一个数组中)到一个组件，而另一个组件在钩子数组上运行一个地图来显示所有的对象时，我的整个react应用程序就会变成一片空白。这是我的代码:

App.js

import './App.css';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { useState } from 'react';
import AddButton from './components/AddButton';
import AddRoom from './components/AddRoom';
import RoomsList from './components/RoomsList';
function App() {
class Room {
constructor(roomname, roomcolor) {
this.roomname = roomname;
this.roomcolor = roomcolor;
/*add room color*/
}}
const [RoomsList, setRoomsList] = useState();
let addRoomFunc = (roomname, roomcolor) => {
let temp = new Room(roomname, roomcolor);
if (roomname.length<=1) { return window.alert("Error") }
else {setRoomsList(...RoomsList, temp) }
};
return (
<div className="App">
<h1>Smart House</h1>
<RoomsList roomslist={RoomsList}/>
<BrowserRouter>
<AddButton></AddButton>
<Routes>
<Route path="/AddRoom" element={<AddRoom addroomfunc={addRoomFunc}/>} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;

AddRoom.jsx

import React from "react";
import { Link } from "react-router-dom";
import { useState } from "react";
export default function AddRoom(props) {
const [RoomName, setRoomName] = useState();
const [RoomColor, setRoomColor] = useState();
return (
<div>
<select
style={{
position: "absolute",
top: "27%",
width: "229px",
height: "40px",
right: "42.5%",
}}
>
<option disabled selected="true">
Select
</option>
<option>Kitchen</option>
<option>Bedroom</option>
<option>Bathroom</option>
</select>
<input
onClick={(element) => {
setRoomName(element.target.value);
}}
maxLength={5}
style={{
position: "absolute",
top: "33%",
width: "220px",
height: "40px",
right: "42.5%",
}}
type="text"
placeholder="Name"
></input>
<input
onClick={(element) => {
setRoomColor(element.target.value);
}}
style={{
position: "absolute",
top: "40%",
width: "220px",
height: "40px",
right: "42.5%",
}}
type="text"
placeholder="Color"
></input>
<Link to="/">
<button
onClick={() => {
{
props.addRoomFunc(RoomName, RoomColor);
}
}}
style={{
position: "absolute",
top: "47%",
width: "228px",
height: "40px",
right: "42.5%",
}}
>
Add
</button>
</Link>
</div>
);
}

RoomsList.jsx

import React from "react";
import { useState } from "react";
import AddRoom from "./AddRoom";
import App from "../App";
export default function RoomsList(props) {
return (
<div>
{props.roomslist.map((value, index) => {
return (
<div>
<h1>{value.name}</h1>
<h1>{value.color}</h1>
</div>
);
})}
</div>
);
}

Answer 1

尝试更改:

setRoomsList(...RoomsList, temp)

:

setRoomsList([...RoomsList, temp])

控制台有任何错误吗?