React Native中Formik无法渲染API返回客户数据问题求助

我正在进行React Native首次测试，开发客户详情页面时，需要将API返回的已有数据填充至表单字段。已完成API调用并获取到数据，但无法渲染展示。

API返回的控制台日志数据：

LA RESPUESTA ES {"address":[{"id":"11","cif":"B123456","nombre":"Cliente de prueba 1","direccion":"C/ Pruebas n 3","cp":"18000","poblacion":"Granada","provincia":"Granada","telefono":"34666777888","email":"pruebas@pruebas.es"}]}

尝试使用response.address.cif获取值时提示undefined，但调用response.address显示为对象。我的代码如下：

useEffect(() => {
    ( async () => {
        if(params?.idAddress){
            const response = await getDatoscliente(auth, params.idAddress);
            const strtest = JSON.stringify(response);
            console.log("LA RESPUESTA ES "+strtest);
            await formik.setFieldValue("cif", address.cif);
        }
    })()
},[params])

问题原因与修复方案 #

1. API返回的address是数组而非单个对象 #

从控制台日志能明确看到，response.address是包含单个对象的数组，不是直接的对象结构。直接用response.address.cif自然会返回undefined，必须先取数组的第一个元素再访问字段：response.address[0].cif。

2. 代码中未定义address变量 #

你的代码里直接使用address.cif，但从未声明或赋值address变量，这会直接导致报错。需要从response中提取地址数据后再使用。

修复后的代码 #

useEffect(() => {
    (async () => {
        if (params?.idAddress) {
            const response = await getDatoscliente(auth, params.idAddress);
            const strtest = JSON.stringify(response);
            console.log("LA RESPUESTA ES " + strtest);
            // 增加空值判断，避免数组为空时报错
            if (response.address?.length > 0) {
                await formik.setFieldValue("cif", response.address[0].cif);
                // 其他表单字段可按同样逻辑填充，示例：
                // await formik.setFieldValue("nombre", response.address[0].nombre);
                // await formik.setFieldValue("direccion", response.address[0].direccion);
            }
        }
    })();
}, [params]);

额外提示 #

• 处理API返回数据时，建议增加空值校验（如response.address?.length > 0），避免因接口返回空数组、字段缺失导致的运行时错误。
• 如果后续接口可能返回多个地址项，需根据业务逻辑选择对应的数据；当前场景取数组第一个元素即可满足需求。

内容的提问来源于stack exchange，提问作者Francisco S