useContext 响应react.js

Question

大家好，我的代码有问题！与 useContext

这是我对服务器的请求：

import axios from "axios";

export const SearchForTracks = async (entValue, tokens) =>{

    const response = await axios.get(`https://api.spotify.com/v1/searcq=${entValue}&type=artist`{
        headers:{
            'Authorization': `Bearer  ${tokens}`
        }
    })

    return response.data.artists.items
}

这是我从请求中得到的响应，它给了我一个像这样的对象数组：

(19) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

这是我的changeHandler函数和useState，我想从请求中获取艺术家并将它们传递给另一个组件

export const ArtistContext = createContext();   

function TopSearch() {
    const [open, setOpen] = useState(false); // Open State
    const [tokens] = useContext(TokenContext) // tokens Context
    const [artists,setArtists] = useState([]) //  Artists State

    // onChange Handler for Search
    const onChangeHandler = async(event) =>{
        [event.target.name] =  event.target.value; // set value to input
        let entValue = event.target.value;
        setArtists(SearchForTracks(entValue,tokens)); // Send input Value to API and get response back
    }

return ( 
        <>
            <ArtistContext.Provider value={artists}> 
                {open ?
                    <SearchLanding />
                    :
                    null
                }
            </ArtistContext.Provider>
        </>
    );
}
export default TopSearch;

所以当我将数据传递给我的子组件时，我收到这样的数据：

Promise {<pending>}
[[Prototype]]
: 
Promise
[[PromiseState]]
: 
"fulfilled"
[[PromiseResult]]
: 
Array(19)

所以当我想破坏它并获取数据或map()时我不能这样做，它说.map()不是一个函数或者它返回未定义。

那么解决办法是什么？

Answer 1

SearchForTracks

是一个承诺。你必须等待。

setArtists(await SearchForTracks(entValue,tokens));