组件的道具为空。
组件的道具为空。
提问于 2022-05-18 13:09:59
我有一个组件(Chat)，它将在从数据库获取一些数据并将其作为道具传递后呈现另一个组件(会话)。
const Chat = () => {
const [conversation, setConversation] = useState([]);
const { name, id } = useSelector((state) => {
return state.user; // this will get the user info from redux store
});
useEffect(() => {
const getConversations = async () => {
try {
const res = await axios.get(`${getConversationRoute}/${id}`, {
withCredentials: true,
credentials: "include",
});
setConversation(res.data);
} catch (error) {
console.log(error);
}
};
getConversations();
}, [id]);
// const = userState.name ? "true" : "false";
return (
<div className="chatPage">
<div className="chatMenu">
<input
placeholder="search for a friend!"
className="chatMenuInput"
></input>
{conversation.map((conversation) => (
<Conversation members={conversation}></Conversation>
))}
</div>
<div className="chatBox">
<div className="chatBoxTop">
<Message own={true}></Message>
</div>
<div className="chatBoxBottom">
<textarea
placeholder="say hello!"
className="chatMessageInput"
></textarea>
<button className="chatSubmitButton">send</button>
</div>
</div>
<div className="chatOnlineWrapper">
<ChatOnline></ChatOnline>
</div>
</div>
);
};
export default Chat;我知道这个函数是异步的，会话组件可能会在获取数据之前被挂载，但是当数据被接收时，聊天组件中的状态会发生变化，这反过来会改变会话并重新修复子会话，但是它没有做到，我检查了代码，我有一个奇怪的行为
conversation did mount Conversation.js:6
Object { }
Conversation.js:9
conversation did mount Conversation.js:6
Object { members: {…} }
Conversation.js:9
conversation did mount Conversation.js:6
Object { members: {…} }
Conversation.js:9
conversation did mount Conversation.js:6
Object { }这意味着道具又送了又空了，怎么可能呢？
会话组件
const Conversation = (props) => {
console.log("conversation did mount");
const { name, id } = useSelector((state) => state.user);
const [user, setUser] = useState(null);
console.log(props);
return (
<div className="conversation">
<img
src="https://via.placeholder.com/40"
alt="userPhoto"
className="conversationImage"
></img>
<span className="conversationName">{name}</span>
</div>
);
};
export default Conversation;我遵循本教程，它对他很好，但不适用于我，https://www.youtube.com/watch?v=HggSXt1Hzfk&t=3146s
回答 1
Stack Overflow用户
发布于 2022-05-18 13:16:46
这种情况下，当您调用API时，加载数据需要一段时间。因此，当会话组件在数据从API加载之前加载时。您可以在会话未从API加载时在聊天中使用加载程序，也可以在会话组件中使用useEffect中会话的依赖关系，以便在更改数据时重新进行会话。希望它能对你有用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72289857
复制相关文章
相似问题
腾讯云开发者
