无法从JSON数据访问嵌套对象

Question

我在React中有以下函数组件:

function GetData() {
const [randomDataJSON, setRandomDataJSON] = useState('');
const url = 'https://randomuser.me/api/';
const getData = () => {
axios
.get(`${url}`)
.then((results) => {
const userData = results.data.results;
setRandomDataJSON(JSON.stringify(userData, null, 2));
})
.catch((err) => console.error(err));
};
return (
<div>
<h3>GetData Component</h3>
<pre>{randomDataJSON[0].name.first}</pre>
<button onClick={getData}>Get Data</button>
</div>
);
}
export default GetData;

来自API的JSON数据如下:

[
{
"gender": "female",
"name": {
"title": "Miss",
"first": "Barbara",
"last": "Sullivan"
}, 
...

我想通过在<pre>标签中使用{randomDataJSON[0].name.first来访问和显示来自API的JSON数据的first name。然而，我一直得到以下错误信息:TypeError: Cannot read properties of undefined (reading 'name')

Answer 1

您正在将json字符串设置为randomDataJSON状态变量，并尝试使用json字符串作为对象。你可以试着联系console.log(randomDataJSON)来证实我的怀疑。

我认为你不应该首先将数据对象转换为json，所以setRandomDataJSON(JSON.stringify(userData, null, 2));将是setRandomDataJSON(userData);

function GetData() {
const [randomData, setRandomData] = useState('');
const url = 'https://randomuser.me/api/';
const getData = () => {
axios
.get(`${url}`)
.then((results) => {
const userData = results.data.results;
setRandomData(userData, null, 2);
})
.catch((err) => console.error(err));
};
return (
<div>
<h3>GetData Component</h3>
<pre>{randomData[0].name.first}</pre>
<button onClick={getData}>Get Data</button>
</div>
);
}
export default GetData;

Answer 2

在页面加载时axios不会运行请求数组，所以当时randomDataJSON是一个字符串。你可以写

const [randomDataJSON, setRandomDataJSON] = useState([]);

上面你将它设置为一个空数组然后检查它的长度是否为

<pre>{randomDataJSON.length > 0 && randomDataJSON[0].name.first}</pre>

Answer 3

非常感谢大家为我指出正确的方向。我的新代码如下我的问题是我不知道React不允许你渲染Javascript对象。为了解决这个问题，我只使用map()方法来映射数据并在对象中显示属性。

function GetData() {
const [randomDataJSON, setRandomDataJSON] = useState([]);
const url = 'https://randomuser.me/api/';
const getData = () => {
axios
.get(`${url}`)
.then((results) => {
const userData = results.data.results;
setRandomDataJSON(userData);
})
.catch((err) => console.error(err));
};
console.log('It is an', typeof randomDataJSON);
console.log('randomDataJSON is ', randomDataJSON);
return (
<div>
<h3>GetData Component</h3>
{randomDataJSON.map((data) => {
return <p>{data.name.first}</p>;
})}
<button onClick={getData}>Get Data</button>
</div>
);
}
export default GetData;