如何在ReactJS中通过url链接访问外部json数据

Question

我试图通过外部url访问我拥有的数据，但没有得到任何输出。在我的解决方案中，我想使用React钩子，所以首先，我指向了url

const dataInfo = "secretURLwithJSONData";

比我在组件中使用useState和useEffect函数

const reactComponent = () => {
const [userData, setUserData] = useState({});
useEffect(() => {
getDataInfo();
}, []);
const getDataInfo = async () => {
const response = await fetch(dataInfo);
const jsonData = await response.json();
setUserData(jsonData);
};

最后一步是我指出JSON 中的数据

<h5 >{userData.name}</h5>

url中的JSON示例：

{
"data": [
{
"attributes": {
"name": "Name"
}
}
]   
}

正如您所看到的是一个对象数组，因此当然有更多的数据，但它应该让您了解结构。

控制台中的jsonData：

jsonData HERE

Answer 1

您有几个问题：

1. 您访问数据错误(至少给出了上面的例子(
2. 在它可用之前，您正在访问它

由于您正在处理异步操作(获取数据(，因此在JSX:中访问数据之前，需要确保数据存在

{userData.data ? <h5>{userData.data[0].attributes.name}</h5> : 'No data yet'}

由于你的数据是一个数组，你需要通过它进行映射(未经测试的代码，但你已经明白了(：

{userData.data ? {userData.data.map((data) => 
<h5 >
{data.attributes.name}</h5> 
)}
: 'No data yet'}

请记住，您还访问了一个深度嵌套的对象，所以您应该确保所有这些级别都存在，除非您足够信任API，它不会更改。

使用可选链对此很有用。