在迭代器中未定义本机函数的反应

Question

这是我的代码，我正在尝试调用downloadPdfFiles此函数，它显示undefined的downloadPdfFiles，请查看并告知我

{
  this.state.filesLits && this.state.filesLits.map(function (files, index) {
    return (
      <li kye={Math.random()}>
        <a onClick={this.downloadPdfFiles.bind(files.originalFilesName, files.fileName, files.attachmentId)}
           style={{textDecoration: 'underline'}}>
          <span>{files.originalFilesName}</span>
        </a>
      </li>
    )
  })
}

Answer 1

这是词汇范围问题。 使用箭头功能修复它。它将绑定到定义为this的{​​{1}}。

downloadPdfFiles

Answer 2

这应该有效：

  downloadPdfFiles = (originalFilesName, fileName, attachmentId)=>{

    console.log(originalFilesName, fileName, attachmentId)
  }

  render(){
    return (
      <block>
        {this.state.filesLits && this.state.filesLits.map((file, index)=>(
            <li key={Math.random()} >
              <a onClick={(e)=>this.downloadPdfFiles(file.originalFilesName, file.fileName, file.attachmentId)}
                style={{ textDecoration: 'underline' }}>
                <span>{file.originalFilesName}</span>
              </a>
            </li>
          ))}
      </block>
    );
  }

Answer 3

当您查看bind的定义时，必须设置一个实例。如果您不想将其绑定到任何地方，而只需提供参数，它应该看起来像这样：

this.downloadPdfFiles.bind(null, files.originalFilesName, files.fileName, files.attachmentId)

如果不是这样的话：

this.downloadPdfFiles.bind(this, files.originalFilesName, files.fileName, files.attachmentId)