Javascript 试图从API响应中提取URL主机名

即使在我尝试JSON.stringify url之后，从API的响应中获取url主机名时也出现了错误，因为当我使用常规键入的url时，它可以正常工作，有没有办法解决这个问题

我得到的错误是未捕获类型错误：构造“URL”失败：无效URL

const Articles = props => {

    const [article, setArticle] = useState([]);
        
        useEffect(() =>{
            axios.get(`https://example.com/item/${props.source}.json`)
            .then((response)=>{
                console.log(response)
                setArticle(response.data)
            })
        }, [])

let articleUrl = JSON.stringify(article.url)
const url = new URL(articleUrl);

    return(
        
            <div>
                <h1>{article.title}</h1>
                <a href={article.url}>
                <p>{url.hostname}</p>
                </a>
            </div>
        
)}

export default Articles

const Articles=props=>{
const[article，setArticle]=useState（[]）；
useffect（（）=>{
axios.get(`https://example.com/item/${props.source}.json`）
。然后（（响应）=>{
console.log（响应）
setArticle（response.data）
})
}, [])
让articleUrl=JSON.stringify（article.url）
const url=新url（articleUrl）；
返回(
{文章标题}
)}
导出默认项目

传递给URL的参数应该是包含URL的字符串

您正在向它传递一个包含JSON的字符串

---

不要将其转换为JSON

尝试在useEffect之后不创建新的URL实例。它不会立即更新。 请阅读此（）

const Articles=props=>{
const[article，setArticle]=useState（[]）；
const[url，setUrl]=useState（[]）；
useffect（（）=>{
axios.get(`https://example.com/item/${props.source}.json`）
。然后（（响应）=>{
console.log（响应）
setUrl（新URL（response.data.URL））
setArticle（response.data）
})
}，[props.source]）
返回(
{文章标题}
)}
导出默认项目

您收到的错误有哪些？你能在这里包括这些吗？我得到“TypeError:构造'URL'失败：无效URL”：当我只有一个article.URL时，有没有方法传递除真实URL以外的任何内容？我只尝试了article.url，但遇到了相同的问题，然后

article.url

不是url。您正在将

文章

初始化为

[]

，因此它最初将是

未定义的

。也许你应该测试一下。有道理，更新也有问题！它做到了，正在考虑为url创建另一个状态，但甚至没有考虑在调用中放置新的url。谢谢你的帮助！

const Articles = props => {

  const [article, setArticle] = useState([]);
  const [url, setUrl] = useState([]);
      
      useEffect(() =>{
          axios.get(`https://example.com/item/${props.source}.json`)
          .then((response)=>{
              console.log(response)
              setUrl(new URL(response.data.url))
              setArticle(response.data)
          })
      }, [props.source])

  return(
      
          <div>
              <h1>{article.title}</h1>
              <a href={article.url}>
              <p>{url.hostname}</p>
              </a>
          </div>
      
)}

export default Articles