从父组件到子组件的 Reactjs 状态 returns 未定义

Question

我正在尝试解决这个问题，但我做不到，我将状态从父组件传递到子组件，如下所示：

Main.js

...
const [chatRooms, setChatRooms] =  useState([])
const [currentRoom, setCurrentRoom] =  useState({})
const prevRoom = useRef()

useEffect(()=>{
        const getRooms = async() =>{            
             const {data} = await axios.get('chat/rooms')            
             setChatRooms(data)
             setCurrentRoom(data[0])
        }
        getRooms()
    },[])

    useEffect(()=>{
        if (currentRoom !== prevRoom.current)
            prevRoom.current = currentRoom
        
        if (prevRoom.current?.id)
            disconnect(prevRoom.current.id)     

        connect()

    },[currentRoom])

return (
 
 <ChatSelect rooms={chatRooms} currentRoom={currentRoom.id} setCurrentRoom={setCurrentRoom} />  

)

ChatSelect.js

const ChatRoomSelection = ({rooms, currentRoom, setCurrentRoom})=>{   
    
    const handleChange = (e) =>{     
        setCurrentRoom(e.target.value)
        //here fails and the selected value can't be set properly in the select option
        console.log(currentRoom)
    }

    return (
        <div>
            <select name="rooms" value={currentRoom} onChange={(e)=>handleChange(e)}>                            
                {
                    rooms.map(room=>(
                        <option value={room.id} key={room.id}>{room.name}</option>
                    ))
                }
            </select>
        </div>
    )

}

当我 select 另一个聊天室时，currentRoom returns id 第一次是正确的，但是当我再次更改它时 returns undefined，这是怎么回事？谢谢。

Answer 1

从我可以解析的内容来看，虽然在您的代码中 currentRoom 似乎应该是一个完整的房间对象，但在 select 的 onChange 处理程序中，您正在将其更新为房间 ID值。

我认为您需要传递整个房间对象作为选项的值。

<select
  name="rooms"
  value={currentRoom.id}
  onChange={handleChange}
>                            
  {rooms.map(room => (
    <option value={room} key={room.id}>{room.name}</option>
  ))}
</select>

或者，您可以将 currentRoom 严格保留为 id 值而不是对象。

主要

...
const [currentRoom, setCurrentRoom] =  useState(null);
...

useEffect(()=>{
  const getRooms = async() =>{            
    const {data} = await axios.get('chat/rooms');         
    setChatRooms(data);
    setCurrentRoom(data[0].id); // <-- save room id
  }
  getRooms();
}, []);

...

return (
  <ChatSelect
    rooms={chatRooms}
    currentRoom={currentRoom} // <-- pass room value
    setCurrentRoom={setCurrentRoom}
 />
);

聊天选择

<select
  name="rooms"
  value={currentRoom}
  onChange={handleChange}
>                            
  {rooms.map(room => (
    <option value={room.id} key={room.id}>{room.name}</option>
  ))}
</select>

从父组件到子组件的 Reactjs 状态 returns 未定义

Reactjs state from parent to child component returns undefined

javascript

reactjs

react-props

use-state