2017-08-07 60 views
-1

所以我不知道爲什麼這段代碼不工作。我擁有的是組件接受的文件類型數組。我嘗試遍歷該數組,並檢查正在上傳的文件是否屬於這些類型之一。如果不是那麼我return;。由於某些原因,acceptedFormats.forEach以下的代碼將繼續運行。如果我console.logaudioTypefile.type我得到每個INVALID。那麼它不應該回來嗎?謝謝!函數不能返回?

class Upload extends React.Component { 
 
      state = { 
 
      percentage: 0, 
 
      uploading: false 
 
      } 
 
      handleUpload = (e) => { 
 
      if (this.state.uploading) { 
 
       return; 
 
      } 
 
      const file = e.target.files[0]; 
 
      const acceptedFormats = ["audio/wav", "audio/mp3", "audio/m4a"]; 
 
      
 
      // TODO: Figure out why this isn't working 
 
      acceptedFormats.forEach((audioType) => { 
 
       console.log(audioType); 
 
       console.log(file.type); 
 
       if(audioType !== file.type) { 
 
       console.log('INVALID'); 
 
       return; 
 
       } 
 
      }) 
 
     
 
      const audioRef = storageRef.child('audio/' + file.name); 
 
      const task = audioRef.put(file); 
 
     
 
      task.on('state_changed', function(snapshot){ 
 
       const progress = (snapshot.bytesTransferred/snapshot.totalBytes) * 100; 
 
       console.log('Upload is ' + progress + '% done'); 
 
       this.setState(() => ({ 
 
       percentage: progress 
 
       })) 
 
      }.bind(this), function(error) { 
 
     
 
      }, function() { 
 
       const downloadURL = task.snapshot.downloadURL; 
 
       const fileName = task.snapshot.metadata.name; 
 
       let songName = removeFileExtension(file.name); 
 
       songName.replace(/\./g,' '); 
 
     
 
       db.ref(`users/${this.props.uid}/uploadedSongs/`).push({ 
 
       downloadURL, 
 
       fileName, 
 
       songName, 
 
       }).then(() => { 
 
       this.setState({ 
 
        percentage: 0, 
 
        uploading: false 
 
       }) 
 
       Alert.success(`Upload successful`, { 
 
        position: 'top-right', 
 
        effect: 'slide', 
 
        timeout: 3000 
 
       }) 
 
       }) 
 
      }.bind(this)); 
 
      } 
 
      render() { 
 
      return (
 
       <div className="Upload"> 
 
       <label className={this.state.uploading ? "Upload__button-disabled btn" : "Upload__button btn"}> 
 
        <span className="Upload__button-text">{this.state.uploading ? "Uploading" : "Upload a song"}</span> 
 
        <input className="Upload__input" type="file" onChange={(e) => this.handleUpload(e)} disabled={this.state.uploading ? true : false}/> 
 
       </label> 
 
       <span style={{color: '#808080', fontSize: '12px'}}>Accepted formats: .wav, .mp3, .m4a</span> 
 
       </div> 
 
      ); 
 
      } 
 
     } 
 
     
 
ReactDOM.render(<Upload />, document.querySelector('#u'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.min.js"></script> 
 

 

 
<h1>Example Upload</h1> 
 
<div id="u"></div>

+1

我不明白這裏面返回Booleantruefalseif條件和聲明return:「如果我的CONSOLE.LOG和audioType文件。類型我得到每個無效。「記錄這些東西不會返回「無效」。你是否試圖說你進入'if(audioType!== file.type)'塊? – jmargolisvt

+0

這是一個純Javascript嗎? Javascript是否接受關鍵字'extends'就像你現在在做什麼?你想要返回一個值還是停止這個過程? – smzapp

+0

我清理它,所以它的runnable ...這顯然是React.js,所以我加了標記 – styfle

回答

2

return.forEach()回調並不妨礙.forEach()回調的範圍之外運行的代碼futher。您可以使用.some()如果true.some()調用返回

if (acceptedFormats.some(audioType => { 
     console.log(audioType); 
     console.log(file.type); 
     return audioType !== file.type 
    })) { 
     console.log('INVALID'); 
     return; 
    }