无法访问 api 对象属性 - 反应钩子答案

【问题标题】：Can't access api object properties - react Hooks无法访问 api 对象属性 - 反应钩子
【发布时间】：2020-10-02 23:01:11
【问题描述】：

我已经控制台记录了从我的 API 返回的数据，我得到：


fetchedData: {…}

confirmed: Object { value: 7650696, detail: "https://covid19.mathdro.id/api/confirmed" }

deaths: Object { value: 425869, detail: "https://covid19.mathdro.id/api/deaths" }

lastUpdate: "2020-06-13T04:33:11.000Z"

recovered: Object { value: 3630249, detail: "https://covid19.mathdro.id/api/recovered" }

<prototype>: Object { … }

<prototype>: Object { … }

然后，当我console.log(data.confirmed) 收到未定义的消息时，即使它就在那里列出。我在我的应用程序中使用了钩子，但我不确定这与它有什么关系，因为我能够很好地控制数据。问题是当我尝试访问数据中的属性时。

https://codesandbox.io/s/wizardly-banzai-2n2xq?file=/src/App.js

【问题讨论】：

您能否提供数据控制台的屏幕截图以便清楚起见？
可能对异步代码的工作原理缺乏了解 - 但是 - 因为您没有显示任何代码，所以无法判断
添加了沙盒链接。目前它控制来自 Card 组件的数据
把你的文件保存在代码框里:)
文件现在应该可见了！

标签： javascript json reactjs api object

【解决方案1】：

应该是

console.log(data.fetchedData && data.fetchedData.confirmed)

改为

console.log(data.confirmed)

更新codesandbox

编辑：

使用destructuring assignment，应该是这样的。

let { fetchedData: {
  confirmed
} = {
    confirmed: 'defaullt value'
  }
} = data;

【讨论】：

谢谢！这确实显示了我想要记录的属性。但是我怎么能解构它，以便我可以更容易地访问这个值呢？理想情况下，我想在参数中执行类似 ({ data: {confirmed} }) 的操作

【解决方案2】：

setState 是异步的，这就是为什么在执行console.log 时data 仍然是一个空对象。这是React docs的引述：

setState 函数用于更新状态。它接受一个新的状态值和入队组件的重新渲染。

console.log(data) 时可以看到整个对象的原因是console.log 在您单击展开箭头之前可能不会评估对象值。

console.log在不同的环境（浏览器）可能会有不同的实现。

如果你想看看data在setData({fetchedData});执行后的样子，你可以这样记录：

console.log(JSON.parse(JSON.stringify(data)));

更多关于console.log的“奥秘”，请查看console.log() async or sync?

【讨论】：

【解决方案3】：

你真的不想在那里解构。但如果你愿意，你可以这样做： https://codesandbox.io/s/peaceful-blackburn-ywdzu?file=/src/App.js:177-667

 const [data, setData] = useState({});
  const [recovered, setRecovered] = useState({});
  const [confirmed, setConfirmed] = useState({});
  const [deaths, setdeaths] = useState({});

  useEffect(() => {
    async function fetchData() {
      const fetchedData = await virusData();
      const { confirmed, recovered, deaths } = fetchedData;
      setData(fetchedData);
      setRecovered(confirmed);
      setConfirmed(recovered);
      setdeaths(deaths);
    }
    fetchData();
  }, []);

【讨论】：