React Hook - 从 class 转换为钩子 - 三元运算符
React Hook - Converting from class to hooks - Ternary Operator
我想将其更改为挂钩格式或函数。
代码
updateRoom(roomId){
if (roomId === '') {
this.setState({RoomId: '', Room: ''})
} else {
this.setState({RoomId: roomId.key, Room: roomId.name});
}
}
我的三元运算符缺少什么?
我是否必须将函数名称更改为 useUpdateRoom
以表示挂钩函数?
HOOK
function UpdateRoom(roomId) {
return '' ? setRoomId : Room
}
function App() {
const [rooms, setRooms] = useState('');
const [roomId, setRoomId] = useState('');
const [user, setUser] = useState('');
return (
<div className="app">
<div className="room">
{rooms.map((room, index) => (
<Room key={index} index={index} room={room} />
))}
</div>
</div>
)
}
你的三元没有计算 roomId。为了清楚起见,我还将参数重命名为 'id'。应该是:
function App() {
const [rooms, setRooms] = useState('');
const [roomId, setRoomId] = useState('');
const [user, setUser] = useState('');
function updateRoom(id) {
return id === ''
? setRoomId('')
: setRoomId(id)
}
return (
<div className="app">
<div className="room">
{rooms.map((room, index) => (
<Room key={index} index={index} room={room} />
))}
</div>
</div>
)
}
此外,您需要将函数放在 App 中,以便它可以访问 setRoomId。
最后,我看不到你在哪里调用它,但它应该是这样的:
<button onClick={() => updateRoom(some_id)}>Change Room</button>
我想将其更改为挂钩格式或函数。
代码
updateRoom(roomId){
if (roomId === '') {
this.setState({RoomId: '', Room: ''})
} else {
this.setState({RoomId: roomId.key, Room: roomId.name});
}
}
我的三元运算符缺少什么?
我是否必须将函数名称更改为 useUpdateRoom
以表示挂钩函数?
HOOK
function UpdateRoom(roomId) {
return '' ? setRoomId : Room
}
function App() {
const [rooms, setRooms] = useState('');
const [roomId, setRoomId] = useState('');
const [user, setUser] = useState('');
return (
<div className="app">
<div className="room">
{rooms.map((room, index) => (
<Room key={index} index={index} room={room} />
))}
</div>
</div>
)
}
你的三元没有计算 roomId。为了清楚起见,我还将参数重命名为 'id'。应该是:
function App() {
const [rooms, setRooms] = useState('');
const [roomId, setRoomId] = useState('');
const [user, setUser] = useState('');
function updateRoom(id) {
return id === ''
? setRoomId('')
: setRoomId(id)
}
return (
<div className="app">
<div className="room">
{rooms.map((room, index) => (
<Room key={index} index={index} room={room} />
))}
</div>
</div>
)
}
此外,您需要将函数放在 App 中,以便它可以访问 setRoomId。
最后,我看不到你在哪里调用它,但它应该是这样的:
<button onClick={() => updateRoom(some_id)}>Change Room</button>