反应：当使用 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 console.log(ifaResult) ，我得到这个 undefined 然后我得到数据。

我想要做的是将我的console.log(ifaResult.data)保留在子组件中，但我明白了

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

Answer 1

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

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

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

———

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

Answer 2

问题是您将apiData初始化为数组，而不是 object。 这是问题，证明：

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

这中断的原因是，当 Javascript 检查 object 中不存在的属性时，它返回未定义。 但是，当您检查undefined的属性时， JavaScript 将引发错误。

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

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

另一个人为的例子：

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

//...

const x = {}
x.data // undefined