Javascript Axios和UseEffect渲染后将道具从父级传递到子级

在UseEffect和Axios调用后，正在努力将道具传递给子组件。这是我在我的

StandingsComponent

开始时的主要调用：

export const StandingsComponent = () => {
    const [payload, setPayload] = useState([]);

    const classes = useStyles();

    useEffect(() => {
        axios
            .get(
                '$URL',
                {
                    headers: {
                        'Content-Type': 'application/json',
                        'x-api-key': '$api-key'
                    }
                }
            )
            .then(function (response) {
                setPayload(response.data.teams);
            })
            .catch(function (error) {
                console.log(error);
            });
    }, []);

    const groupA = payload.filter((team) => team.groupName === 1);
    const groupB = payload.filter((team) => team.groupName === 2);

    return (
        <Column>
            <Row>
                <GroupComponent
                    teams={groupA}
                />
                <GroupComponent
                    teams={groupB} />
            </Row>
        </Column>
    );
};

但是当我进入

GroupComponent

时，我无法

console.log（）

从

teams

prop获取值。我得到错误：

TypeError:无法读取未定义的属性“name”

export const GroupComponent = ({teams }) => {
    const theme = useTheme();
    const classes = useStyles({ theme });

    function renderStat(title, value) {
        return (
            <Row horizontal='space-between' vertical='center'>
                <span className={classes.itemTitle}>{title}</span>
                <span className={[classes.itemTitle, classes.itemValue].join(' ')}>{value}</span>
            </Row>
        );
    }

    console.log(teams[0].name); //TypeError here

    return (
        <CardComponent
            items={[
                renderStat(teams[0].name, teams[0].id),
                renderStat(teams[1].name, teams[1].id),
                renderStat(teams[2].name, teams[2].id),
                renderStat(teams[3].name, teams[3].id1)
            ]}
        ></CardComponent>
    );
};

export default GroupComponent;

export const GroupComponent=（{teams}）=>{
const theme=useTheme（）；
const classes=useStyles（{theme}）；
函数renderStat（标题、值）{
返回(
{title}
{value}
);
}
console.log（团队[0].name）；//此处键入错误
返回(
);
};
导出默认组件；

---

我仍然在研究JavaScript中的对象和axios API的异步调用。如何将

团队

道具传递到

组组件

并避免

未定义

错误？

只有在获取正确数组时才能显示

组组件

返回(
{
groupA.length！==0&&
}
{
groupB.length！==0&&
}
);

只有在获取正确的数组时，才能显示

GroupComponent

返回(
{
groupA.length！==0&&
}
{
groupB.length！==0&&
}
);

您应该使用

async

和

wait

等待从url获取结果

  useEffect(
    () => {
      const loadData = async () => {
        const response = await Axios.get(url);
        setPayload(response.data.teams);
      };
      loadData();
    },
    []
  );

在

GroupComponent

中，您应该检查

teams

是否已卸载以通知正在加载

  if (!teams || !teams.length) {
    return <div>Loading data ...</div>;
  }

if（！teams | |！teams.length）{
返回加载数据。。。；
}

---

一旦设置了

teams

，

GroupComponent

将自动更新。

您应该使用

async

和

wait

等待从url获取结果

  useEffect(
    () => {
      const loadData = async () => {
        const response = await Axios.get(url);
        setPayload(response.data.teams);
      };
      loadData();
    },
    []
  );

在

GroupComponent

中，您应该检查

teams

是否已卸载以通知正在加载

  if (!teams || !teams.length) {
    return <div>Loading data ...</div>;
  }

if（！teams | |！teams.length）{
返回加载数据。。。；
}

---

一旦设置了

teams

，

GroupComponent

将自动更新。

if语句在

GroupComponent

中的位置是什么？我正在努力让它显示您应该在

GroupComponent

的返回（

console.log

不起作用，应该在代码中删除）之前放置if语句，以检查它是否能够呈现

CardComponent

if语句在

GroupComponent

中的位置？我正在努力让它显示您应该在

GroupComponent

的返回（

console.log

将不起作用，应该在您的代码中删除）之前放置if语句，以检查它是否能够呈现

CardComponent