리로드시 다 사라지고 아무것도 안나타납니다

import "bootstrap/dist/css/bootstrap.min.css";
import { Container, InputGroup, FormControl, Button, Row, Card, Col } from "react-bootstrap";
import { useState, useEffect } from "react";
import { Configuration, OpenAIApi } from "openai";
import "bootstrap/dist/css/bootstrap.min.css";
import axios from "axios";
import "./App.css";
import Loading from "./Loading";
import Music from "./Music";
import Keyword from "./Keyword";

const client_id = process.env.REACT_APP_CLIENT_ID;
const client_secret = process.env.REACT_APP_CLIENT_SECRET;
const weather_api_key = process.env.REACT_APP_WEATHER_API_KEY;
const openai_api_key = process.env.REACT_APP_OPENAI_API_KEY;

function App2() {
const [accessToken, setAccessToken] = useState("");
const [searchInput, setSearchInput] = useState("");
const [playlists, setPlaylists] = useState([]);
const [tracks, setTracks] = useState([]);
const [temperature, setTemperature] = useState("");
const [weather, setWeather] = useState("");
const [mood, setMood] = useState("");
const [moodTag, setMoodTag] = useState(false);

useEffect(() => {
//API access token
var authParameters = {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
 },
body: "grant_type=client_credentials&client_id=" + client_id + "&client_secret=" + client_secret,
 };

fetch("https://accounts.spotify.com/api/token", authParameters)
 .then((result) => result.json())
 .then((data) => setAccessToken(data.access_token));

//위치&날씨 가져오기
function getWeather(position) {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
const weatherUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${weather_api_key}`;
fetch(weatherUrl)
 .then((response) => response.json())
 .then((data) => {
const weatherKeyword = data.weather[0].main;
const temperature = Math.round(Number(data.main.temp) - 273.15);
setTemperature(temperature);
setWeather(weatherKeyword);

const configuration = new Configuration({
apiKey: openai_api_key,
 });
const openai = new OpenAIApi(configuration);

openai
 .createCompletion({
model: "text-davinci-003",
prompt: `If I say "The current temperature is ${temperature} degrees and the weather is ${weather}. Please recommend a mood, singer, song title, etc. for this ${weather}.Please answer with one keyword only.`,
temperature: 0.7,
max_tokens: 256,
top_p: 1,
frequency_penalty: 0,
presence_penalty: 0,
 })
 .then((result) => {
setSearchInput(result.data.choices[0].text);
console.log(result.data.choices[0].text);
 });

 });
 }

function getWeatherFail() {
console.log("Can't find you.");
 }

navigator.geolocation.getCurrentPosition(getWeather, getWeatherFail);

var searchParameters = {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + accessToken,
 },
 };

fetch("https://api.spotify.com/v1/search?q=" + searchInput + "&type=playlist", searchParameters)
 .then((response) => response.json())
 .then((data) => {
setPlaylists(data.playlists.items);
console.log(data.playlists.items);
 });
fetch("https://api.spotify.com/v1/search?q=" + searchInput + "&type=track", searchParameters)
 .then((response) => response.json())
 .then((data) => {
setTracks(data.tracks.items);
console.log(data.tracks.items);
 });
 }, []);

<h6>// useEffect(() => {
// if (searchInput) {
// search();
// }
// }, [searchInput]);</h6>
<h6>//Search + inputKeyword
// async function search() {
// console.log("Search for " + searchInput);</h6>
<h6>// var searchParameters = {
// method: "GET",
// headers: {
// "Content-Type": "application/json",
// Authorization: "Bearer " + accessToken,
// },
// };</h6>
<h6>// await fetch("https://api.spotify.com/v1/search?q=" + searchInput + "&type=playlist", searchParameters)
// .then((response) => response.json())
// .then((data) => {
// setPlaylists(data.playlists.items);
// console.log(data.playlists.items);
// });
// await fetch("https://api.spotify.com/v1/search?q=" + searchInput + "&type=track", searchParameters)
// .then((response) => response.json())
// .then((data) => {
// setTracks(data.tracks.items);
// console.log(data.tracks.items);
// });
// }</h6>

return (
<div className="bg">
<div className="content-left">
<Keyword searchInput={searchInput} weather={weather} />
</div>
<div className="content-right">
<div className="card">
<p>
<span>{tracks[0].name}</span>
</p>
<p>
<span>Artist</span>
</p>
<p>
<span>{playlists[0].name}</span>
</p>
<p>
<span>TopTrack</span>
</p>
</div>
</div>
</div>

 );
}

export default App2;

선생님 안녕하세요.

리액트 수강후에 개인프로젝트 만들어보는 중인데요.

1. 필요한 데이터를 받아오는 과정을 useEffect에 넣음

2.데이터를  useState에 저장함

3. 화면으로 보여줌(새로고침 하지않은 상태에서는 {playlists[0].name}이라고 넣으면 나타나는데 페이지를 리로드하면 다 사라지고 하얀 화면만 나타납니다.

위와 같은 오류들이 발생하는데 며칠째 해결하려고 해봐도 잘 안됩니다.ㅠㅠ 

4. 여기 있는 질문글 중에 똑같은 상황에 대한 글을 봐서 보고 참고했는데도 안되네요.

5. 근데 map 함수를 돌려서 넣으면 나타납니다....왜이런가요. 저는 나온 데이터 중에 하나만 보여주고 싶은데 map을 안돌리면 화면이 나타나지가 않아요