Reactjs 如何使用react显示数据

您当前正在使用react复制Spotify

您当前正在开发搜索功能，并已成功收到响应

我想在屏幕上显示这个

我如何解决这个问题？请帮帮我

const onClick = () => {
    const inputSearchData = sessionStorage.getItem('inputData');
    const inputTypeData = sessionStorage.getItem('inputType');

// console.log(inputTypeData)
axios({
    headers: {  
        "Authorization": `Bearer ${token}`,
        "Accept": "application/json",
        "Content-Type": "application/json",
    },
    method: 'GET',
    url: 'https://api.spotify.com/v1/search',
    params: {
        q: inputSearchData,
        type: inputTypeData,
    },
}).then((res) => {
    console.log(res);
    
}).catch(err => {
    console.log(err);
})

}

当您从

axios

请求中得到响应时，需要将其存储在react状态中

在组件的return语句中访问此项。 大概是这样的：

const SomeComponent=（）=>{
const[response，setResponse]=useState（）；
const onClick=async（）=>{
const inputSearchData=sessionStorage.getItem（“inputData”）；
const inputypedata=sessionStorage.getItem（“inputType”）；
等待axios({
标题：{
授权：`Bearer${token}`，
接受：“应用程序/json”，
“内容类型”：“应用程序/json”
},
方法：“获取”，
url:“https://api.spotify.com/v1/search",
参数：{
q：输入搜索数据，
类型：inputTypeData
}
})
。然后（（res）=>{
setResponse（res）；
})
.catch（（错误）=>{
控制台日志（err）；
});
};
返回(
{/*在此处访问您的响应状态*/}
{/*大概是这样的：*/}
{response.map（（项目，索引）=>{
{item.somethingFromYourData}
})}
)
};

共享您的代码

const SomeComponent = () => {
  const [response, setResponse] = useState();

  const onClick = async () => {
    const inputSearchData = sessionStorage.getItem("inputData");
    const inputTypeData = sessionStorage.getItem("inputType");

    await axios({
      headers: {
        Authorization: `Bearer ${token}`,
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      method: "GET",
      url: "https://api.spotify.com/v1/search",
      params: {
        q: inputSearchData,
        type: inputTypeData
      }
    })
      .then((res) => {
        setResponse(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  return (
    <div>
      {/* Access your response state over here */}
      {/* That will be something like that : */}
      {response.map((item, index) => {
        <div key={index}>
          {item.somethingFromYourData}
        </div>
      })}
    </div>
  )
};