Javascript 反应元件参考不'；API请求后不存在

我有一个“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>
        )
    }
}

---

更新

我已经更新了代码，按照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>
        )
    }
}

class文件下载扩展了React.Component{
handleClick=（）=>{
this.props.refreshtToken（）
.然后（（）=>{
这个.form.submit（）；
});
}
handleRef=（ref）=>{
如果（参考）{
this.form=ref；
}
}
render（）{
返回(
{this.props.children}
)
}
}

承诺链内

this.form.submit（）

行为的屏幕截图

在承诺链之外使用

this.form.submit（）

的行为截屏

---

---

为什么调用

refreshToken（）

操作后，

this.refs.fileDownload

不可用？

这可能是因为在使用箭头函数时，

this

上下文没有传递给函数。看

我建议您将“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 (
      ...
    );
  }
}

---

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

如果您以前使用过React，您可能会熟悉一个较旧的API，其中ref属性是一个字符串，如“textInput”，DOM节点是作为this.refs.textInput访问的。我们建议不要这样做，因为字符串引用有一些问题，被认为是遗留的，可能会在将来的某个版本中被删除。如果当前正在使用this.refs.textInput访问refs，我们建议改为使用回调模式。

---

实际上，您提交了表单，因此页面被重新加载（或重定向到

this.props.url

）——看起来是这样。这并不能解释为什么在调用

refreshtToken（）

之前调用

submit（）

，表单会正确下载……是否您在组件中使用了箭头函数？使用

handleClick（）{…

syntax尝试一下，如果我在构造函数中绑定

handleClick

，syntax仍然不起作用，如果执行`handleClick=（event）=>{event.preventDefault（）；//运行代码的其余部分，会发生什么情况。}箭头函数不创建

此

上下文，因此

此

仍然引用组件类。我尝试了您的示例，但它仍然不起作用。那么，它不仅仅是您这里的代码。您需要使用有关

refreshToken

的信息更新您的问题。它可能是更新的正在禁用redux状态并导致组件重新呈现。此外，不应使用字符串refs。请使用ref回调

ref={（el）=>{this.fileDownload=el；}}/>

谢谢@Ray，这是关于回调引用的一个很好的观点。我已经更新了上面的示例，使用回调引用而不是字符串引用，但是仍然无法在承诺回调中调用

submit（）

。。。

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 (
      ...
    );
  }
}