React Native从WordPress API加载文章图片时undefined报错的解决方法

问题描述 #

我正在开发一款React Native应用，目前已实现通过WordPress API获取指定分类文章的标题和描述并展示。现在需要将列表项中的静态图片替换为对应WordPress文章的og_image，尝试使用以下代码：

<Image
style={styles.image}
source={{uri:item.yoast_head_json.og_image.url}}
/>

运行时出现错误：'undefined is not an object'。查看API返回的JSON数据，yoast_head_json.og_image是一个包含图片对象的数组，图片URL存储在数组元素的url字段中。

当前代码片段 #

列表项渲染代码 #

return (
    <View style={styles.box}>
        <TouchableOpacity activeOpacity={0.5}>
            <View style={styles.listItem}>
                <Image
                style={styles.image}
                source={{uri: 'https://www.samsonite.be/on/demandware.static/-/Sites/default/dw851ab6f0/images/misc/sams_share-image.jpg'}}
                />
                <Text style={styles.title}>{item.title.rendered}</Text>
                <Text style={styles.eigenschappen}>{item.yoast_head_json.og_description}</Text>
                <Pressable style={styles.seeProduct} onPress={() => navigation.navigate("DetailScreen", {itemTitle: item.title.rendered})}>
                    <Text style={styles.text}>Bekijk product: {item.title.rendered}</Text>
                </Pressable>
            </View>
        </TouchableOpacity >
    </View>
)

AllSuitcasesScreen核心代码 #

const AllSuitcasesScreen = ({ navigation }) => {
  const [suitcases, setSuitcases] = useState([]);
  const getSuitcases = async () => {
    try {
      const response = await fetch("https://evivermeeren.com/wp-json/wp/v2/posts?categories=59")
      const json = await response.json();
      setSuitcases(json);
    } catch (error) {
      console.error(error);
    }
  }
  useEffect(() => {
    getSuitcases();
  }, []);
  // 其他代码省略
}

API返回的og_image结构示例 #

"og_image": [
    {
        "width": 200,
        "height": 300,
        "url": "https://evivermeeren.com/wp-content/uploads/2022/12/zwart-klein-4-300-hard-4-e1670410664142.webp",
        "type": "image/webp"
    }
]

解决方案 #

核心修改点 #

1. 正确访问数组元素：og_image是数组，不能直接用.url，需要取数组的第一个元素（通常og_image数组只有一个元素），即item.yoast_head_json.og_image[0]，再访问其url字段。
2. 添加可选链保护：使用?.操作符防止数组为空、字段不存在的情况，避免出现undefined错误。
3. 设置 fallback 图片：当og_image不存在或没有有效URL时，使用原来的静态图片作为备用。

修改后的Image组件代码 #

<Image
  style={styles.image}
  source={{
    uri: item.yoast_head_json.og_image?.[0]?.url || 'https://www.samsonite.be/on/demandware.static/-/Sites/default/dw851ab6f0/images/misc/sams_share-image.jpg'
  }}
/>

完整修改后的列表项渲染代码 #

return (
    <View style={styles.box}>
        <TouchableOpacity activeOpacity={0.5}>
            <View style={styles.listItem}>
                <Image
                  style={styles.image}
                  source={{
                    uri: item.yoast_head_json.og_image?.[0]?.url || 'https://www.samsonite.be/on/demandware.static/-/Sites/default/dw851ab6f0/images/misc/sams_share-image.jpg'
                  }}
                />
                <Text style={styles.title}>{item.title.rendered}</Text>
                <Text style={styles.eigenschappen}>{item.yoast_head_json.og_description}</Text>
                <Pressable style={styles.seeProduct} onPress={() => navigation.navigate("DetailScreen", {itemTitle: item.title.rendered})}>
                    <Text style={styles.text}>Bekijk product: {item.title.rendered}</Text>
                </Pressable>
            </View>
        </TouchableOpacity >
    </View>
)

额外建议 #

如果部分文章可能存在多个og_image元素，你可以根据需求选择合适的元素（比如取第一个）；如果需要处理加载失败的情况，可以给Image组件添加onError回调，进一步优化用户体验。

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