属性url在类型上不存在never Typescript问题

j0pj023g  于 2023-10-22  发布在  TypeScript
关注(0)|答案(1)|浏览(181)

我练习我的 typescript ,并有这个问题,不太清楚如何设置类型的网址时,即时通讯设置组合在这里。url将是一个字符串,当然这是在handleMix函数中:

import { useState } from 'react'

const headers = new Headers();
    headers.append('Content-Type', 'application/json');

    let options = {
        headers
      }

type Mix = {
    audio_length: number;
    comment_count: number;
    created_time: string;
    favourite_count: number;
    key: string;
    name: string;
    play_count: number;
    repost_count: number;
    url: string;
    user: {
        name: string;
        usernames: string;
    }
}

const Search = () => {
    const [search, setSearch] = useState<string>("")
    const [play, setPlay] = useState([])
    const [mix, setMix] = useState<string>("")
    const url = `https://api.mixcloud.com/search/?q=${search}&type=cloudcast`
    const handleSubmit = async () => {
        await fetch(url, options).then(response => response.json())
        .then(data=>setPlay(data.data))
    }

    console.log(play)
    const handleMix = (index:number) => {
        setMix(`https://app.mixcloud.com/oembed/?url=${play[index].url}`)
    }

  return (
    <div className='flex flex-col items-center justify-center mt-16'>
        <div className='w-[70%] sm:w-[60%] md:w-[50%] flex justify-center'>
        <input type="text" placeholder='Search for a mix...' 
        className='w-[100%] p-4 rounded-l-full outline-none'
        onChange={(e)=>setSearch(e.target.value)}
        />
        <button onClick={handleSubmit} className='rounded-r-full p-2 bg-slate-600 text-white font-bold text-sm'>Submit</button>
        </div>
        <div>
            {play && play.map((mix:Mix,index)=>(
                <div className='cursor-pointer gap-2' key={index}
                onClick={()=>handleMix(index)}
                >
                    <p>{mix.name}</p>
                </div>
            ))}
        </div>
        <div className='m-6 w-[40%]'>
        <iframe width="100%" height="120" src="https://www.mixcloud.com/widget/iframe/?feed=https%3A%2F%2Fwww.mixcloud.com%2Fspartacus%2Fparty-time%2F&amp;hide_cover=1"></iframe>
        </div>
    </div>
  )
}

export default Search

我做错了什么。对不起:我是打字机新手,每当它向我尖叫时,我都试图让我的头转过来

vtwuwzda

vtwuwzda1#

通知TypeScript playMix的数组:

const [play, setPlay] = useState<Mix[]>([])

相关问题