Javascript 反应状态给出未定义的新反应

我对react native还不熟悉，我一直在开发一个简单的应用程序，但出于某种原因，我一直在获取（未定义）我的一些状态，而且在获取数据时，服务器在返回实际值之前会多次调用值（未定义）。我已经搜索了很长时间，但没有找到任何有用的东西，所以我来这里寻求比我更多的高级开发者的帮助

我的代码如下所示：

const { data: chat, loading } = useApi(chatApi.getChat, { chatId: chatId, channelId: route.params.channelId });
const chatMessages = chat.messages  // I declared this only for testing
const [messages, setMessages] = useState(chatMessages);
console.log("Chat Messages: " + chatMessages)
console.log("messages State: " + messages)

在终端中，我得到：

Chat Messages: undefined
messages State: undefined
Chat Messages: undefined
messages State: undefined
Chat Messages: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
messages State: undefined

另外，为什么“chat”变量在给出实际值之前会多次使用值（未定义）呈现？这导致后端WS-server被多次调用，而没有任何原因导致性能下降

useApi钩子：

import { useEffect, useState } from "react";

const useApi = (apiFunc, funcParams ={}) => {
    const [data, setData] = useState([]);
    const [error, setError] = useState(false);
    const [loading, setLoading] = useState(false);

    const fetchData = async () => {
        setLoading(true);
        const response = await apiFunc(funcParams);
        setLoading(false);
        if (!response.ok) return setError(true);
        setData(response.data);
    };
    useEffect(() => { fetchData() }, []);
    if (data) return { data, setData, error, loading, setLoading };
};

export default useApi;

完整代码：

const chatId=route.params.chat.id；
const{data:chat，load}=useApi（chatApi.getChat，{chatId:chatId，channelId:route.params.channelId}）；
const{user}=useAuth（）；
const[text，setText]=useState（（）=>{return”“；}）；
const chatMessages=chat.messages//我声明这只是为了测试
const[messages，setMessages]=useState（chatMessages）；
log（“聊天信息：”+chatMessages）
日志（“消息状态：”+消息）
const chatSocket=newwebsocket（`${settings.wsUrl}chat/${chatId}/？userId=${user.id}`）；
//会客离开房间
useffect（（）=>{
chatSocket.onmessage=e=>{
const data=JSON.parse（e.data）；
setMessages（[…messages，data.message]）；
};
return（）=>{
chatSocket.close（0）；
};
}, []);
常量handleSendMessage=（）=>{
发送（JSON.stringify({
文本：文本，
}));
setText（“”）；
};
返回(
...

在加载数据时，您似乎正在得到未定义的数据（因为数据尚未存在，因此未定义），无论数据是否已加载，只要组件呈现，您都会打印变量的值

您可以访问加载指示符：

const{data:chat，loading}

，但是您没有将加载变量用于任何条件

if (!loading && data != null) {
   console.log("Chat Messages: " + chatMessages)
   console.log("messages State: " + messages)
   const chatSocket = new WebSocket(`${settings.wsUrl}chat/${chatId}/?userId=${user.id}`);
}

---

好的，这解决了多次渲染的问题，但是为什么messages状态始终为undefined，而chatMessages变量为OnceUserState提供了一个值，这是一个在渲染之间保留状态的React钩子。这意味着第一次渲染它时，您将它作为输入（chatMessages在第一次渲染时未定义，因为它尚未加载）。当组件重新渲染时，React会记住chatMessages的状态（未定义）并且不会重置它。加载后需要调用setMessages。您可以通过几种方法来实现。在OneEffect中，将加载作为依赖项，或者如果不需要将useState作为状态，您可以删除useState并将其作为变量

if (!loading && data != null) {
   console.log("Chat Messages: " + chatMessages)
   console.log("messages State: " + messages)
   const chatSocket = new WebSocket(`${settings.wsUrl}chat/${chatId}/?userId=${user.id}`);
}