0

我有一些代码可以获取用户的 ipAddres。我现在在我componentDidMount的app.js

 async componentDidMount() {
    await eventTrackingStore.getIpAddress();
  }

所以我在我的 app.js 中做了它，因为它是我的根组件，我只想设置一次。如果用户从主页开始并浏览该站点，这将正常工作。

然而，有些页面可以直接加载（即您在浏览器中输入 url，它会直接进入该页面）。

由于反应生命周期从最直接的组件开始，它调用一个期望设置 ipAddress 代码的方法，但直到它到达 app.js 才设置

现在我可以将上面的代码放在每个方法中，但这会变得乏味。reactjs 或 mbox 或 mbox 状态树中是否有某种方法会首先触发？

4

2 回答 2

1

如果您使用 mobx-state-tree 并且您有一个全局存储，那么该全局存储可以在afterCreate方法中进行 API 调用

const AppModel = types.model({
  ips: types.array(types.string)
}).actions(self => ({
  afterCreate() {
    flow(function*() {
      const ips = yield eventTrackingStore.getIpAddress();
      self.setIps(ips)
    })()

  },
  setIps(ips: string[]) {
    self.ips = ips
  }
}))

或者您可以在包装应用程序的每个页面的包装反应组件中执行相同的操作。

class App extends React.Component {
  componentDidMount() {
    eventTrackingStore.getIpAddress().then(res => {
      // set the ips into a store or any logic you want in order to pass them down to children         
    })
  }

  render() {
    return this.props.children
  }
}
于 2019-09-11T11:16:45.997 回答
0

我可以想到两个解决方案：您可以使用反应上下文

Context 提供了一种通过组件树传递数据的方法，而无需在每个级别手动传递 props。

使用上下文在所有组件之间共享存储，如果未加载数据，则在该嵌套组件中初始化加载。

如果数据已经在那里，那么就拿走它， getIpAddress方法应该返回一个承诺，所以如果数据已经在那里，它将立即被解决。

于 2019-07-26T12:52:26.937 回答