React：使用 axios 将 api 数据传递给子组件时，如何解决未定义的问题？

Question

我在访问传递给子组件的数据时遇到问题。这可能与 Promise 在访问它时未被解决有关，但这是我不知道如何解决的问题。我需要的是确保从父组件中完全检索数据，然后传递给子组件 ApplicationStats。

这是我为父组件写的代码：

import axios from 'axios';
import ApplicationStats from './ApplicationStats';

const Apps = () => {
  const [apiData, setApiData] = useState([]);
  const ifaUrl= 'url1';
  const orgUrl = 'url2';

  const fetchData = () => {
    const ifaResponse = axios.get(ifaUrl);
    const orgResponse = axios.get(orgUrl);
    axios.all([ifaReq, orgReq]).then(
      axios.spread((...responses) => {
        setApiData({
          ifaResult: responses[0];
          orgResult: responses[1];
        });
      }),
    );
  };

  useEffect(() => {
    fetchData();
  }, [])

  return (
    <div className="card-deck"
      <ApplicationStats apiData={apiData} />
    </div>
  );
};

这是子组件：

import React from 'react';

const ApplicationStats = ({apiData}) => {
  const {ifaResult, orgResult} = apiData;
  console.log(ifaResult.data);

  return (
    <div>Hey</div>
  );
};

在子组件中，如果我将 console.log(ifaResult.data) 替换为 console.log(ifaResult)，我得到这个未定义的，然后我得到数据。

我想做的是将我的 console.log(ifaResult.data) 保留在子组件中，但我得到了这个

我什至尝试过使用 async/await，但我觉得我遗漏了一些重要的东西。

Answer 1

您 apiData 的初始值是一个空数组。

当 Ajax 响应到达时，您将其替换为具有 ifaResult 属性.

的对象

…但是到那时你已经使用初始数据渲染了组件并得到了错误。

————

当您为状态设置初始数据时，使其与您打算稍后放入其中的数据的形状相同。

Answer 2

问题是您将 apiData 初始化为一个数组，而不是一个对象。这是问题，已证明：

let x = [];
const { property } = x; // property === undefined!
console.log(property.data) // ERROR! Cannot find property `data` of undefined

这个中断的原因是因为当 Javascript 检查对象的属性不存在时，它 returns 未定义。但是，当您从 undefined 中检查属性时，JavaScript 将引发错误。

这将防止您收到错误，并将 undefined 记录到控制台而不是中断：

const [apiData, setApiData] = useState({ ifaResult: {}, orgResult: {}});

另一个人为的例子：

const x = undefined;
x.data // ERROR!

//...

const x = {}
x.data // undefined

React：使用 axios 将 api 数据传递给子组件时，如何解决未定义的问题？

React: How do I fix getting undefined when passing api data to child component using axios?

javascript

undefined

promise

reactjs

axios