Question

在我的React应用程序中，我的应用程序组件具有一个进行API调用的函数。该函数作为道具向下传递给子组件，并且子组件在componentDidMount上调用此函数。当名为app.js的函数将API调用的结果传递回子级组件作为道具时。

一切正常，您可以在https://codesandbox.io/s/eloquent-roentgen-03dzs上看到它（nb，当在浏览器中查看应用程序时，您需要将用户名jinky32附加到URL https://03dzs.csb.app/-因此https://03dzs.csb.app/jinky32）

但是我不想继续进行不必要的API调用。一旦组件具有其wantedCards和ownedCards道具，我希望它们使用它们，而不是发出新的API请求。

在调用loadCardData函数之前，检查数据是否已加载到这些子组件属性中的正确方法是什么？检查this.props.ownedCards.length < 1是否对我不起作用

Answer 1

好的，感谢@RicardoSanchez，转到上下文是一个很好的选择。但是，根本的问题是，在我的表组件中，我正在使用<a href>链接到其他页面，这迫使组件重新安装。

将其更改为<Link to=意味着状态没有丢失（状态已通过上下文api传递给子组件），我可以停止进行不必要的调用！

Answer 2

Maaaan您做错了，应该使用react-redux和reduxpersist， https://react-redux.js.org/api/hooks， https://www.npmjs.com/package/redux-persist，第一个（redux）将您的数据保存在一个商店中，而在一个商店中，则不需要将数据作为道具传递，您总是将其保存在商店中并从商店中检索。持久程序将商店数据保存在您的存储器中（您可以选择会话或本地），并且可以在调用api之前使用中间件检查数据是否已经存在

这是一个例子。

export function callApi(payload) {
    try {
      const getProducts = (state) => state.products //access the store
      const products = yield select(getProducts)

      if(products) return;
      yield Axios.get("api/products")
    } catch (err) {
      console.log('error at sagas [getAllProducts type]', err)
    }
}

我正在使用sagas作为中间件。

React-如何等待组件道具

2 个答案: