Javascript React-让组件使用道具中的数据，而不是新的API请求

我有一个React应用程序，它在几个组件中发出几个API请求。我试图修改我的代码，以便这些组件不在

componentDidMount（）

上发出新请求，而是使用

props

中提供的数据。我对其中一个组件有效，但对另一个组件无效——据我所知，我处理这些组件的人没有什么不同，所以我认为我的方法肯定有问题

进行API调用的函数位于下面的

app.js

中。调用的结果保存到状态（

wantedCards

或

ownedCards

，具体取决于API调用），然后作为React Router（

BrowserRouter

）中的

prop

传递到组件

当我第一次转到

path=“/：username/own”

路由时，会发出API请求：

和

app.js

状态更新：

并设置

NewTable

组件道具：

但是，当我随后转到

path=“/：username/own/team/：id”

路由时，会再次调用api

和

console.log

报告

OWN TRUE

，它告诉我

if (path[2] == "own" && props.ownedCards.length < 1) {
      console.log("OWN TRUE");
....
.... including axios call
}

if（路径[2]=“own”&&props.ownedCards.length<1）{
console.log（“自身真实”）；
....
…包括axios呼叫
}

正在满足（即，

props.ownedCards

为空）。但是，如果我查看组件，我可以看到设置了道具：

但是，如果我随后导航回

路径=“/：username/own”

路径，则不会进行API调用，并且应用程序会使用

道具中的数据

谁能告诉我正确的方法是确保组件使用
道具中的数据而不是继续返回API吗？
这里的根本问题是，在我的表组件中，我使用了链接到其他页面的方法，这迫使组件重新安装

将此更改为您再次在组件中调用loadCardData，为什么不将结果作为道具传递呢？谢谢您的回复。如果我没有在
componentDidMount（）
中调用
loadCardData
，则调用不会发生。对不起，我是个新手，所以很可能是个傻瓜。你到底想达到什么目的？如果在子组件中进行API调用，则在呈现它们时它将始终运行。如果在父组件中创建它，则在渲染它（父组件）时它将运行，并且可以将结果作为道具传递给其子组件。我想要的是，仅当
wantedCards
（对于
/want
路由）或
ownedCards
（对于
/own
路由）为空时，才进行API调用。我不想每次呈现组件时都要回到API。必要的数据以状态存在于
app.js
或两个组件上的
props
中
componentDidMount() {
    this.props.loadCardData(this.props);
  }

if (path[2] == "own" && props.ownedCards.length < 1) {
      console.log("OWN TRUE");
....
.... including axios call
}