関数は返されませんか？

Question

なぜこのコードが機能していないのか分かりません。私が持っているのは、コンポーネントが受け入れるファイルタイプの配列です。その配列を繰り返し処理し、アップロードされるファイルがこれらの型のいずれかであるかどうかを確認します。そうでなければ、私はreturn;です。何らかの理由でacceptedFormats.forEachのコードが引き続き実行されます。 console.logaudioTypeとfile.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>

Answer 1

return.forEach()コールバック関数内で実行する.forEach()コールバックの範囲外futherコードを妨げません。 「私はaudioTypeとファイルをCONSOLE.LOG場合：あなたはtrueが、私はこれに従わない

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