如何在持久性NextJS React Audio Player组件中捕获Mobx可观察的更新？

Question

我有一个服务器端渲染的音频播放器react app。

使用NextJS' custom _app.js，我有一个持久的AudioPlayer组件，当mobx存储中的this.play(mp3url)发生更改时，我想在其中调用内部的@observable playerData = {}函数。

我已在需要时成功点击了我的应用程序更新playerData中其他组件的按钮。

但是我无法在AudioPlayer组件中检测到这些更新，因此我可以设置其状态并调用this.play(mp3url)开始播放音频。

pages / _app.js

import initializeStore from '../stores/stores';

export default class MyApp extends App {

  static async getInitialProps(appContext) {
    const mobxStore = initializeStore();
    appContext.ctx.mobxStore = mobxStore;
    const appProps = await App.getInitialProps(appContext);
    return {
      ...appProps,
      initialMobxState: mobxStore,
    };
  }

  constructor(props) {
    super(props);
    this.mobxStore = props.initialMobxState;
  }

  render () {
    const { Component, pageProps } = this.props
    return (
      <Provider {...this.mobxStore}>
          <Component {...pageProps} />
        { this.mobxStore.playerStore.playerActive && <AudioPlayer /> }
      </Provider>
    )
  }
}

components / AudioPlayer.js

import ReactPlayer from 'react-player'
import { inject, observer } from 'mobx-react'

@inject('playerStore')
@observer
class Player extends Component{
    constructor(props) {
        super(props)
        this.state = {
            url: null,
            image: null
        }
    }
    componentWillUpdate(nextProps) {
        this.setState({
            url: nextProps.playerStore.playerData.url,
            image: nextProps.playerStore.playerData.image
        }, () => { this.play(this.state.url) })
    }

    // ...Other react-player functions

    render() {
        <ReactPlayer 
        {/* ...required props... */}
        />
    }
}

因此，如何让这个持久性音频播放器检测到Mobx可以播放音频网址吗？

截至目前，componentWillReceiveProps，componentWillUpdate或componentDidUpdate未被调用。当我设置componentDidMount时，@observable playerActive = true被完全按预期调用一次

我有一个服务器端渲染的音频播放器react应用。使用NextJS的自定义_app.js，我有一个持久的AudioPlayer组件，无论何时当我想在其中调用内部的this.play（mp3url）函数时，...

Answer 1

两个问题