Viewer doesn't update file on props update

[apennell]

Version: ^0.4.2

I built a carousel to rotate through files but the viewer content doesn't update when the filePath changes.

Steps to Reproduce

1. Pass a state-managed string to <FileViewer>'s filePath prop, e.g. <FileViewer filePath={this.state.currentFilePath} />
2. Update the path state--for instance on click of a button, change this.state.currentFilePath to a different file's path

Expected Behavior

When the path state changes on click, the file viewer content will update to reflect the new file at the updated path.

Actual Behavior

The content in the file viewer doesn't update.

I tried making a wrapper component around <FileViewer /> to ensure that it was receiving a new state. That wrapper got the proper state and re-rendered, but the <FileViewer /> itself didn't update and re-render. Inspecting pdf-viewer.jsx in react-file-viewer's code, it looks like the reason for this is that the document retrieval and state.pdf setting only happens in componentDidMount, so there's no handling of the pdf file update.

(Side note, which should really be documented separately: The part of componentDidMount that I just mentioned is

    PDFJS.getDocument(filePath, null, null, this.progressCallback.bind(this)).then((pdf) => {
      this.setState({ pdf, containerWidth });
    });

progressCallback is deprecated, resulting in this console warning: Deprecated API usage: getDocument is called with pdfDataRangeTransport, passwordCallback or progressCallback argument.)

[apennell]

I was able to get it to update by passing key={currentFile.id} to <FileViewer />, but I think this is still an issue.

[dylanhusted]

For any Mobx users trying to use RFV, you will need to use React's component lifecycle instead of Mobx for this. Because of the code Annie pointed out above, RFV doesn't see Mobx's state changes.

[yulolimum]

Posting here as a Mobx-State-Tree user, the key={fileId} trick fixed it for me.