HTML5视频未显示来自Axios React数据获取视频的视频

Question

我对视频播放器页面有问题，无法找到与视频文件关联的数据。我一直找不到404或“来自我代码的Axios代码段的未定义错误，因为这是控制台日志所在的位置。但是，数据对象也出现在控制台中，但URL仍然未定义，并且视频播放器也是

后端的代码，这是通过路由： upload.js：

const { sequelize, video } = require('../models');

    router.post("/getVideo", async (req, res) => {
        
            try {
                const getvideo = await video.findOne({
                    "_id" : req.body.videoId
                })
        
                return res.json(getvideo)
            } catch (err) {
                console.log(err)
                return res.status(500).json({ error: 'Something went wrong' });
            }
        })

Sequeilize Console似乎是功能性的，

这是前端的代码： lidetvideopage.js

const DetailVideoPage = (props) => {
        let { videoId } = useParams();
        const [video, setVideo] = useState([]);
    
        const videoVariable = {
            videoId: videoId
        }
    
        useEffect(() => {
            axios.post('http://localhost:5000/api/upload/getVideo', videoVariable, {
                headers: {
                    'accept': 'application/json',
                },
            })
            .then(response => {
                if (response.data.success) {
                    console.log(response.data.video)
                    setVideo(response.data.video)
                    console.log(response.data.success);
                } else {
                    console.log(response.data);
                    alert('Failed to get video Info')
                }
        }).catch(error => {
                        console.log(error);
                    });
    
    }, []);
    
        return (
            <div className="postPage" style={{ width: '100%', padding: '3rem 4em' }} >
            <video style={{ width: '100%' }} src={`http://localhost:5000/${video.filePath}`} controls></video>
    
            </div>
        );
    }

这是我从本地主机页面收到错误的图像： localhost console

在这里是前端的路线： 从'./组件/视图/详细信息videopage';

<Router>
      <Routes>
      <Route exact path='/video/:videoId' element={<DetailVideoPage />} />
      </Routes>
    </Router>

更新：我将问题重命名以更准确地显示问题的性质。主要问题是，即使获取了数据，也没有显示视频。

Answer 1

解决方案：
我已经在VC的建议和一些研究的建议下找到了解决方案，这要归功于他！

我已经为我的详细信息重构了一些代码：

function DetailVideoPage() {
  const [Video, setVideo] = useState([]);

  const videoId = useParams();

  const videoVariable = {
    videoId: videoId
  }

  useEffect(() => {

    const getSingleVideoData = async () => {
      axios.post('http://localhost:5000/api/upload/getVideo', videoVariable)
      .then(response => {
              console.log(response);
              setVideo(response.data.filePath);
            //   let myPath = response.data.filePath; 
            //   alert( "MP4 path is : " + myPath);
      })
      .catch(function (error) {
          console.log(error);
      });

    }
    getSingleVideoData();

  }, []);


  return (

    <>
      <Row>
          <Col lg={18} xs={24}>
          <div className="postPage" style={{ width: '100%', padding: '3rem 4em' }}>
          <video style={{ width: '100%' }} src={`http://localhost:5000/${Video}`} type='video/mp4' controls autoPlay muted />
          </div>
          </Col>
      </Row>

      </>
  )

}

Answer 2

用于测试...查看是否在页面上显示视频：

const DetailVideoPage = (props) => {
        let { videoId } = useParams();
        const [video, setVideo] = useState([]);
    
        const videoVariable = { videoId: videoId }
        
        var myDiv; var myVid;
    
        useEffect(() => {
            axios.post('http://localhost:5000/api/upload/getVideo', videoVariable, {
                headers: {
                    'accept': 'application/json',
                },
            })
            .then(response => {
                if (response.data.success) 
                {
                    console.log(response.data.video)
                    setVideo(response.data.video)
                    console.log(response.data.success);
                    
                    ///////////////////////////////////
                    //# test adding of Video
                    
                    //# create the Div
                    myDiv = document.createElement('div');
                    myDiv.setAttribute("id", "myDiv");

                    //# create the Video object
                    myVid = document.createElement( "video");
                    myVid.setAttribute("id", "myVid");
                    myVid.setAttribute("controls", "true" );
                    myVid.setAttribute("height", "500");
                    myVid.setAttribute("src", path);
                    myVid.load();

                    //# add Video into Div, then finally add Div to page
                    myDiv.appendChild( myVid );
                    document.body.appendChild( myDiv );
                    
                    ///////////////////////////////////
                } 
                else 
                {
                    console.log(response.data);
                    alert('Failed to get video Info')
                }
        }).catch(error => {
                        console.log(error);
                    });
    
    }, []);
        
        //# If needed... see if returning the Div works...
        //return ( myDiv );
        
        /*
        return (
            <div className="postPage" style={{ width: '100%', padding: '3rem 4em' }} >
            <video style={{ width: '100%' }} src={`http://localhost:5000/${video.filePath}`} controls></video>
    
            </div>
        );
        */
}