时间戳

首页 > 解决方案 > 无法从 JSON 数据访问嵌套对象

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

问题描述

我在 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"
    }, 
...

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

标签： javascriptreactjsjson

解决方案

您正在将 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;

推荐阅读