Reactjs 在axios post之后更新组件

我有一个使用axios上传媒体的React页面

它上传的很好，但我不能让页面重新加载或更新

在主、父页面中，我有一个用于上传媒体的组件（MediaUpload）和一个用于显示媒体的组件（MediaPlayer）

上传成功后，我希望MediaPlayer组件更新并显示新上传的媒体文件名

现在，当它上传时，我必须刷新浏览器才能看到新文件

我是不是错过了让这一切顺利的东西

谢谢

--母公司--

--媒体--

--媒体上传--

import React，{Component}来自'React'；
从“axios”导入axios；
类MediaUpload扩展组件{
状态={selectedFile:null}
uploadHandler=（e）=>{
e、 预防默认值（）；
var bodyFormData=新FormData（）；
bodyFormData.append（'fileData'，this.state.selectedFile）；
axios({
方法：“post”，
url:`/api/HangingPlanet/alien files/${this.props.alienId}/files/upload`，
数据：bodyFormData，
配置：{headers:{'Content Type'：'multipart/form data'}
})
。然后（（响应）=>{
//成功
控制台日志（响应）；
this.setState（{selectedFile:event.target.files[0]}）
})
.catch（（响应）=>{
//处理错误
控制台日志（响应）；
});
}
render（）{
const{alienId}=this.props；
返回(
上传媒体
上传！
);
}
}
导出默认媒体上传；

--媒体播放器--

import React，{Component}来自'React'；
从“axios”导入axios；
从“/RenderalienMedia”导入RenderalienMedia；
const mediaPath=“/api/HangingPlanet/alien files/”；
类MediaPlayer扩展组件{
构造函数（）{
超级（）；
此.state={
文件：[]
};
}
componentDidMount（）{
get（`/api/HangingPlanet/alien files/${this.props.alienId}/files`）
。然后（（响应）=>{
this.setState（{files:response.data}）
})
.catch（（错误）=>{
console.log（错误）；
});
}
showMedia=（道具）=>{
const{alienId}=this.props；
返回(
{
props.files.length>0&&
{props.files.map（（文件）=>
)}
}
);
}
render（）{
const{alienId}=this.props；
返回(
外星媒体
{this.showMedia（this.state）}
);
}
}
导出默认MediaPlayer；

---

event.target.files[0]

应该是

e.target.files[0]

上传完成后，您应该告诉父组件重新加载MediaPlayer

--母公司--

类父级扩展组件{
状态={
showMediaPlayer:错，
加载：false，
}
handleOnUpload=（）=>{
这是我的国家({
showMediaPlayer:错，
加载：对，
});
}
handleOnUploadEnd=（）=>{
这是我的国家({
showMediaPlayer:没错，
加载：false，
});
}
render（）{
返回(
--媒体--
{this.state.loading==true&&this.state.showMediaPlayer===false&&loading…}
{this.state.loading==false&&this.state.showMediaPlayer===true&&}
);
}
}

--媒体上传--

类MediaUpload扩展组件{
状态={selectedFile:null}
uploadHandler=（e）=>{
e、 预防默认值（）；
//在父级上调用handleOnUpload函数以创建加载组件
this.props.onUpload（）；
var bodyFormData=新FormData（）；
bodyFormData.append（'fileData'，this.state.selectedFile）；
axios({
方法：“post”，
url:`/api/HangingPlanet/alien files/${this.props.alienId}/files/upload`，
数据：bodyFormData，
配置：{headers:{'Content Type'：'multipart/form data'}
})
。然后（（响应）=>{
//成功
控制台日志（响应）；
this.setState（{selectedFile:event.target.files[0]}）
//在父级上调用handleOnUploadEnd函数以呈现媒体播放器
this.props.onUploadEnd（）；
})
.catch（（响应）=>{
//处理错误
控制台日志（响应）；
});
}
render（）{
const{alienId}=this.props；
返回(
上传媒体
上传！
);
}
}

<div> -- Media -- </div>
<div>
</div>
<div>
    <MediaUpload alienId={alien.id} />
</div>
<div>
    <MediaPlayer alienId={alien.id} />
</div>

import React, { Component } from 'react';
import axios from 'axios';

class MediaUpload extends Component {

state = { selectedFile: null }

uploadHandler = (e) => {
    e.preventDefault();

    var bodyFormData = new FormData();

    bodyFormData.append('fileData', this.state.selectedFile);

    axios({
        method: 'post',
        url: `/api/HangingPlanet/alien-files/${this.props.alienId}/files/upload`,
        data: bodyFormData,
        config: { headers: { 'Content-Type': 'multipart/form-data' } }
    })
        .then((response) => {
            //handle success
            console.log(response);
            this.setState({ selectedFile: event.target.files[0] })
        })
        .catch((response) => {
            //handle error
            console.log(response);
        });

}

render() {
    const { alienId } = this.props;

    return (
        <div>
            <div>Upload Media</div>
            <input type="file" name="fileData" multiple />
            <button onClick={this.uploadHandler}>Upload!</button>
        </div>
    );
}
}

export default MediaUpload;

import React, { Component } from 'react';
import axios from 'axios';
import RenderalienMedia from './RenderalienMedia';

const mediaPath = "/api/HangingPlanet/alien-files/";

class MediaPlayer extends Component {
constructor() {
    super();
    this.state = {
        files: []
    };
}

componentDidMount() {
    axios.get(`/api/HangingPlanet/alien-files/${this.props.alienId}/files`)
        .then((response) => {
            this.setState({ files: response.data })
        })
        .catch((error) => {
            console.log(error);
        });
}

showMedia = (props) => {
    const { alienId } = this.props;
    return (
        <div>
            {
                props.files.length > 0 &&
                    <div>
                    {props.files.map((file) =>
                        <RenderalienMedia
                            mediaPath={mediaPath}
                            alienId={alienId}
                            fileId={file.id}
                            downloadName={file.downloadName}
                            fileTitle={file.title}
                        />
                    )}
                    </div>
            }
        </div>
    );
}

render() {
    const { alienId } = this.props;
    return (
        <div>
            <div>alien Media</div>
            <div>
                {this.showMedia(this.state)}
            </div>
        </div>
    );
}
}

 export default MediaPlayer;

this.setState({ selectedFile: event.target.files[0] })

class Parent extends Component {
    state = {
    showMediaPlayer: false,
    loading: false,
  }

  handleOnUpload = () => {
   this.setState({
   showMediaPlayer: false,
   loading: true,
   });
  }

  handleOnUploadEnd = () => {
   this.setState({
   showMediaPlayer: true,
   loading: false,
   });
  }

  render(){
    return (
        <div> -- Media -- </div>
        <div>
        </div>
        <div>
            <MediaUpload
              alienId={alien.id}
              onUpload={this.handleOnUpload}
              onUploadEnd={this.handleOnUploadEnd}
             />
        </div>
        <div>
            {this.state.loading === true && this.state.showMediaPlayer === false  && 'Loading...'}
            {this.state.loading === false && this.state.showMediaPlayer === true  && <MediaPlayer alienId={alien.id} />}
        </div>
      );
    }
}

class MediaUpload extends Component {

state = { selectedFile: null }

uploadHandler = (e) => {
    e.preventDefault();

    // call handleOnUpload Function on Parent to create loading component
    this.props.onUpload();

    var bodyFormData = new FormData();

    bodyFormData.append('fileData', this.state.selectedFile);

    axios({
        method: 'post',
        url: `/api/HangingPlanet/alien-files/${this.props.alienId}/files/upload`,
        data: bodyFormData,
        config: { headers: { 'Content-Type': 'multipart/form-data' } }
    })
        .then((response) => {
            //handle success
            console.log(response);
            this.setState({ selectedFile: event.target.files[0] })

            // call handleOnUploadEnd Function on Parent to render media player
            this.props.onUploadEnd();
        })
        .catch((response) => {
            //handle error
            console.log(response);
        });

}

render() {
    const { alienId } = this.props;

    return (
        <div>
            <div>Upload Media</div>
            <input type="file" name="fileData" multiple />
            <button onClick={this.uploadHandler}>Upload!</button>
        </div>
    );
}
}