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

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>
    )

}

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

Answer 1

从我可以解析的内容来看，尽管在您的代码中，currentRoom 似乎应该是一个完整的房间对象，但在选择的 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>