Question

我有一个使用文件选择器的音频组件，在它的Input: `public.test` | size | color | |------+-------| | S | red | | S | blue | | S | red | | M | red | select size, {{ dbt_utils.pivot('color', dbt_utils.get_column_values('public.test', 'color')) }} from public.test group by size Output: | size | red | blue | |------+-----+------| | S | 2 | 1 | | M | 1 | 0 |事件上，状态被更新，音频组件被重新加载。

onChange

因此，每次更改文件时，fileLoaded = (event) => { const url = URL.createObjectURL(event.target.files[0]); let react_player = ( <AudioPlayer url={url} name={event.target.files[0].name} /> ); this.setState({ reactPlayer: react_player }); event.preventDefault(); }; render() { return ( <div> <form onSubmit={this.submitAudioFile}> <Button className="Button" size="large" variant="contained" component="label" startIcon={<CloudUploadIcon />} > Upload File <input accept="audio/*" type="file" onChange={this.fileLoaded} style={{ display: "none" }} /> </Button> </form> {this.state.reactPlayer} </div> ); }组件都应从状态中重新呈现。但这并没有发生，即使触发了reactPlayer事件，加载到reactPlayer的文件仍然保持不变。

这是onChange组件。

AudioPlayer

Answer 1

Don't store jsx in state

只需在状态中为网址存储一个名称并呈现jsx。

        <label>Filter List</label>
        <select
          class="form-control"
          v-model="listFilter"
          v-on:change="filterList()"
        >
          <option value="" selected disabled class="text-hide">Select filter</option>
          <option value="a">All</option>
          <option value="f">Fe</option>
          <option value="m">Mas</option>
          <option value="s">Tru</option>
          <option value="c">Cou</option>
        </select>

Answer 2

找到了解决方案。诀窍是传递道具并篡改AudioPlayer组件中的状态。

          <audio
            onLoadedMetadata={(event) => this.audioWasLoaded(event)}
            onEnded={(event) => this.audioEnded(event)}
            onTimeUpdate={(event) => this.audioIsPlaying(event)}
            src={this.props.url}
            ref={this.audioRef}
          />

只需将音频标签的src连接到从父组件传递来的prop上，一切就很好了。

状态JSX组件未更新

2 个答案: