功能不归?

时间:2017-08-07 00:59:54

标签: javascript reactjs

所以我不确定为什么这段代码不起作用。我所拥有的是组件接受的文件类型数组。我尝试迭代该数组并检查上传的文件是否属于这些类型之一。如果不是那么我return;。由于某种原因,acceptedFormats.forEach下面的代码继续运行。如果我console.log audioTypefile.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 个答案:

答案 0 :(得分:2)

return回调中的

.forEach()不会阻止.forEach()回调范围之外的其他代码运行。如果.some()Boolean,您可以true使用false ifreturn以及true条件和语句返回.some() if (acceptedFormats.some(audioType => { console.log(audioType); console.log(file.type); return audioType !== file.type })) { console.log('INVALID'); return; } 电话

返回
    String ipAddress = "192.168.1.";
    for (int i=1; i < 255; i++){
        String ip = ipAddress + i;
        InetAddress inet = InetAddress.getByName(ip);
        if (inet.isReachable(300)){
            Log.d(TAG, ip + " is reachable.");
        }
    }