我在使用 console.log(result) 时可以在控制台看到输出结果，但当我尝试 console.log(result.content) 时，在应用中却没有显示内容。
我正在使用 React Native 和一个名为“quotable.io”的引述 API（链接：https://api.quotable.io/quotes/random），您可以查看其响应：
日志输出
[{"_id": "tvXaBe-wkKU", "author": "Octavia E. Butler", "authorSlug": "octavia-e-butler", **"content": "有时候成为朋友意味着掌握时机的艺术。有时需要沉默，有时放手让人自行走向命运，还有时要准备好在一切结束之后帮助他们收拾残局。"**, "dateAdded": "2020-07-10", "dateModified": "2023-04-14", "length": 229, "tags": ["Friendship"]} ]
尽管使用 console.log(result) 可以正常工作，但是 console.log(result.content) 的输出却是未定义。
以下是您的代码片段
import React, { useEffect, useState } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
const App = () => {
const [Quote, setQuote] = useState('加载中...');
const [Author, setAuthor] = useState('加载中...');
const [isLoading, setIsLoading] = useState(false);
const randomQuote = () => {
setIsLoading(true);
fetch('https://api.quotable.io/quotes/random')
.then((res) => {
if (!res.ok) {
throw new Error(`获取失败: ${res.status}`);
}
return res.json();
})
.then((result) => {
console.log(result.content);
setQuote(result.content);
setAuthor(result.author);
setIsLoading(false);
})
.catch((error) => {
console.error('获取引述时出错:', error.message);
setIsLoading(false);
});
};
useEffect(() => {
randomQuote();
}, []);
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ADD8E6',
}}
>
{/* ...省略其他 JSX 元素 */}
</View>
);
};
export default App;