Primereact 树：选择一个节点将在 React Player 中显示视频

问题描述

我正在尝试编写代码，如果单击树节点，它将在 React Player 组件中显示视频。但什么也没有出现。我的代码如下：

Map.js（这里省略了一些不重要的代码）

import React,{ useEffect,useState } from "react";
import { Tree } from 'primereact/tree';
import ReactPlayer from 'react-player';

import { NodeService } from '../service/NodeService';

const MapDemo = () => {
    const [nodes,setNodes] = useState(null);
    const [expandedKeys,setExpandedKeys] = useState({});
    const nodeService = new NodeService();

    const onSelect = (node) => {
        setURL(node.children.data)
    }

    const [url,setURL] = useState()

    useEffect(() => {
        nodeService.getTreeNodes().then(data => setNodes(data));
    },[]); // eslint-disable-line react-hooks/exhaustive-deps

        return (
            <div>
                <div className="card">
                    <h2>Map</h2>
                        <Tree value={nodes} expandedKeys={expandedKeys}
                            onToggle={e => setExpandedKeys(e.value)} onSelect={onSelect}/>
                        <ReactPlayer align="center" url={url} key={url} controls="true" width="100%" height="425px" playing="true"/>
                </div>
            </div>
        )
}
                
export default MapDemo;

treenodes.json

{
    "root": [
        {
            "key": "0","label": "Main Building","data": "Buildings Folder","icon": "pi pi-fw pi-home","children": [{
                "key": "0-0","label": "Floor 1","data": "Floor Folder","icon": "pi pi-fw pi-align-justify","children": [{ "key": "0-0-0","label": "Camera 1","icon": "pi pi-fw pi-video","data": "https://www.youtube.com/watch?v=Rh7CJu-Ny4o" },{ "key": "0-0-1","label": "Camera 2","data": "https://www.youtube.com/watch?v=UuGhhltfQi8" }]
            }]
        }
    ]
}

非常感谢任何帮助。提前致谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）