React Native中setSTNo函数未正常调用报serviceTData.id未定义问题求助

核心问题1：传参缺失 #

你定义的setSTNo函数要求传入serviceTData作为参数，但你在fetch请求的成功回调中调用setSTNo()时没有传递任何参数，导致函数内部拿到的形参serviceTData为undefined，访问serviceTData.id就会抛出你遇到的类型错误。

核心问题2：React状态更新的异步特性 #

你在回调中刚执行完setserviceTData(json.data)，就直接读取当前作用域下的serviceTData状态，拿到的仍然是本次渲染周期的旧值，即使你传了这个状态也不是刚拿到的接口返回数据。

修复方案 #

直接将接口返回的json.data作为参数传给setSTNo即可，同时补全useCallback的依赖数组，避免闭包陷阱：

const onRefresh = React.useCallback(async() => {
    setserviceTData([])
    fetch(`${API_URL}/v1/serviceTicket`, {
        method: 'GET',
        headers: {
            Accept: 'application/json',
            'apiKey': 'asdkhjfgsed34e',
            'deviceId': deviceId,
            'sessionId': sessionId
        },
    })
        .then((response) => response.json())
        .then((json) => {
            if (!json.success ) {
                if (json.errorCode === 403) {
                    sessionExpire()
                }
            } else if(json.data){
                setserviceTData(json.data);
                console.log('Ticket Data',json.data);
                // 把接口返回的json.data传给setSTNo
                setSTNo(json.data);
            }
        })
        .catch((error) => console.error(error))
        .finally(() => setLoading(false));
// 补全所有需要的依赖
}, [refreshing, API_URL, deviceId, sessionId, sessionExpire, setserviceTData, setSTNo, setLoading]);

console.log("st No" , serviceTData)

如果你的业务逻辑要求必须从状态serviceTData中取值调用setSTNo，也可以把setSTNo的调用放在useEffect中，监听serviceTData的变化触发：

React.useEffect(() => {
  // 保证serviceTData存在且有id再调用
  if(serviceTData?.id) {
    setSTNo(serviceTData)
  }
}, [serviceTData, setSTNo])

内容的提问来源于stack exchange，提问作者Ryan Fonseka