API请求

Question

我有一个“FileDownload”组件，我用来触发表单提交，从而提示在客户端上下载。在触发下载之前，我必须先调度redux操作以获取新的JWT令牌，以确保用户已通过身份验证。但是，一旦刷新令牌，元素ref就不再存在。

不起作用

class FileDownload extends React.Component {
    handleClick = () => {

        console.log(this.refs);
        // => {fileDownload: form.file-download}

        this.props.refreshToken()
            .then(()=> {

                 console.log(this.refs);
                 // => {}

                 this.refs.fileDownload.submit();
                 // => Error: Cannot read property 'submit' of undefined
            });
    }

    render() {
        return (
            <div onClick={this.handleClick.bind(this)}>
                <form
                    ref="fileDownload"
                    action={this.props.url}
                    className="file-download"
                    method="POST">
                    <input
                        disabled={this.props.disabled}
                        name="formData"
                        type="submit"
                        value={JSON.stringify(this.props.data)}
                    />
                </form>
                {this.props.children}
            </div>
        )
    }
}

如果我在发送this.refs.fileDownload.submit()之前致电refreshToken() ，则该文件会按预期下载...

作品

...
handleClick = () => {

    console.log(this.refs);
    // => {fileDownload: form.file-download}

    this.refs.fileDownload.submit(); // successfully downloads
}
...

更新

我已根据React的建议更新了代码以使用回调引用，但遇到了同样的问题：

class FileDownload extends React.Component {
    handleClick = () => {

        this.props.refreshToken()
            .then(()=> {
                 this.form.submit();
            });
    }

    handleRef = (ref) => {
       if (ref) {
           this.form = ref;
       }
    }

    render() {
        return (
            <div onClick={this.handleClick.bind(this)}>
                <form
                    ref="fileDownload"
                    action={this.props.url}
                    className="file-download"
                    method="POST">
                    <input
                        disabled={this.props.disabled}
                        name="formData"
                        type="submit"
                        value={JSON.stringify(this.props.data)}
                    />
                </form>
                {this.props.children}
            </div>
        )
    }
}

屏幕捕获承诺链中<{1}} 的行为

使用this.form.submit() 承诺链的行为的屏幕截图

调用this.form.submit()操作后，为什么this.refs.fileDownload无效？

Answer 1

这可能是因为当您使用箭头函数时，this上下文不会传递给函数。见Arrow Functions

我建议你将'then'函数移出并在构造函数中将其绑定到它。

class FileDownload extends React.Component {
  constructor() {
    super();
    this.refreshTokenCallback = this.refreshTokenCallback.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  refreshTokenCallback() {
    this.refs.fileDownload.submit();
  }

  handleClick() {
    this.props.refreshToken().then(this.refreshTokenCallback);
  }

  render() {
    return (
      ...
    );
  }
}

Answer 2

你的引用应该是回调方法而不是字符串。字符串的使用被认为是遗留的，并且这种模式存在已知问题。

  

如果您以前使用过React，那么您可能熟悉一个旧的API，其中ref属性是一个字符串，例如＆＃34; textInput＆＃34;，并且DOM节点作为this.refs.textInput访问。我们建议不要使用它，因为字符串引用有一些问题，被认为是遗留问题，很可能会在未来的某个版本中删除。如果您当前正在使用this.refs.textInput来访问引用，我们建议使用回调模式。   https://facebook.github.io/react/docs/refs-and-the-dom.html