Javascript 如何控制从中获取数据的URL？

我需要在Reactjs中创建一个组件，用于从给定URL检索JSON数据并在树视图中显示它。组件应该能够处理任何有效的JSON，而不需要对其结构有任何期望

到目前为止，这是我的POC：

import React, { useState, useEffect } from 'react';
import JSONTree from 'react-json-tree';
import './App.css';


function App() {
 const [jsonDate, setJson] = useState('{}');
 const [siteUrl, setUrl] = useState('');

useEffect(() => {
const fetchData = async () => {
  try{
    let url = "https://jsonplaceholder.typicode.com/users";
    const res = await fetch(url);
    const json = await res.json();
    setJson(json)
  }catch(error){
    console.log(error)
  }
};
fetchData();
}, [siteUrl]);


return (  
 <div className="App">
  <h1>Enter your site: </h1>
 <input type="text" name="url" />
 <button onClick={()=>setUrl('https://jsonplaceholder.typicode.com/users')}>Get 
JSON</button>
 <JSONTree data={jsonDate} /> 
 </div>
);
}

export default App;

import React，{useState，useffect}来自“React”；
从“react json树”导入JSONTree；
导入“/App.css”；
函数App（）{
const[jsonDate，setJson]=useState（'{}'）；
const[siteUrl，setUrl]=useState（“”）；
useffect（（）=>{
const fetchData=async（）=>{
试一试{
让url=”https://jsonplaceholder.typicode.com/users";
const res=等待获取（url）；
const json=await res.json（）；
setJson（json）
}捕获（错误）{
console.log（错误）
}
};
fetchData（）；
}，[siteUrl]）；
报税表（
输入您的站点：
setUrl（'https://jsonplaceholder.typicode.com/users“）}>获取
JSON
);
}
导出默认应用程序；

现在，我需要包含组件的页面能够控制从中获取数据的URL

我怎么做

---

在本例中，我添加了一个硬编码的站点URL，在解决此问题后，我将添加所有onChange函数等，但现在请知道用户可以输入他想要的任何站点名称（稍后我将添加验证）。

如果

URL

是一个参数，请通过组件的道具传递它