React Native中如何为API返回的指定对象项添加URL前缀？

问题背景 #

我需要给API返回的data数组里每个对象的products_picture字段加上URL前缀，以便在应用中正常显示产品图片。目前已能获取并展示所有数据，但处理时遇到两个问题：

• 在useEffect外部调用result.data完全无效
• 在useEffect内部直接访问result.data.products_picture，拼接后得到https://somewebsite.com/undefined

API返回的产品数据示例 #

"data": [
    {
        "id": "213",
        "products_id": "213",
        "products_picture": "uploads/p/p/example_1.jpg",
        "products_name": "placeholder"
    },
    {
        "id": "123",
        "products_id": "123",
        "products_picture": "uploads/p/p/example_2.jpg",
        "products_name": "placeholder3452"
    }
]

原获取数据代码（未添加前缀版本） #

const [products, setProducts] = useState([]);

const requestOptions = {
    method: "GET",
    headers: myHeaders,
    redirect: "follow",
};

const siteUrl = "https://somewebsite.com/";

useEffect(() => {
    const getProducts = () => {
        fetch(
            "http://apitest.dogusyapimarket.com.tr/api/v2/products",
            requestOptions
        )
        .then((response) => response.json())
        .then((result) => {
            setProducts(result.data);
        })
        .catch((error) => console.log("error", error));
    };

    getProducts();
}, []);

解决方案 #

出现undefined的原因很直接：result.data是一个数组，你直接访问数组的products_picture属性自然拿不到对应值。正确的做法是遍历数组中的每个产品对象，逐个修改图片路径字段。

修改后的代码如下：

const [products, setProducts] = useState([]);

const requestOptions = {
    method: "GET",
    headers: myHeaders,
    redirect: "follow",
};

const siteUrl = "https://somewebsite.com/";

useEffect(() => {
    const getProducts = () => {
        fetch(
            "http://apitest.dogusyapimarket.com.tr/api/v2/products",
            requestOptions
        )
        .then((response) => response.json())
        .then((result) => {
            // 遍历数组，给每个产品的图片路径添加URL前缀
            const processedProducts = result.data.map(product => ({
                ...product, // 保留原对象的所有属性
                products_picture: `${siteUrl}${product.products_picture}`
            }));
            setProducts(processedProducts);
        })
        .catch((error) => console.log("error", error));
    };

    getProducts();
}, []);

补充说明 #

• 关于useEffect外部无法访问result.data：fetch是异步操作，只有在fetch的回调函数（第二个then内部）才能拿到请求返回的result.data，组件初始化时useEffect外部的代码会先执行，此时请求还未完成，自然没有result.data的值。
• 使用map遍历数组时，通过扩展运算符...product保留原对象的所有属性，只重写products_picture字段，避免丢失其他数据。

内容的提问来源于stack exchange，提问作者Ozan Boran