為反應js中的數據值轉義斜杠

Question

正在嘗試學習 React JS 如果這是常識或錯誤的格式，請原諒我。 在這里查看並沒有找到任何類似的解決方案來解決我想要完成的任務。 我也在使用電影數據庫進行我的學習項目。

代碼目前的作用：

1. 我有一個方法可以從這個 API 調用中獲取當前的熱門電視節目：

   const TRENDING_TV_URL = ${API_URL}trending/tv/day?api_key=${API_KEY} ;

2. 從這些數據中，我將它映射到我想要使用它的不同組件

3. 我從 API 調用返回的數據中提取並在單擊標題時將其作為我的 URL 路由

4. 我稱這個值：fetchContentId

5. 例如，當單擊“男孩”標題時，它會在我的 URL“http://localhost:3000/tv/76479”中返回此內容

6. 這正是我想要的。

7. 問題，我有一個新的 API 調用，我想使用 fetchContentId 值來獲取單個標題數據。 為此，我需要知道它是電視節目還是電影，然后用正斜杠分隔 ID。 我可以從 media_type 和 id 中提取這些值。 並且相信我這樣做是正確的，因為我在我的 URL 中返回了結果。 看來問題是當我用正斜杠分隔值然后將該值發送到新的 API 調用時。

我正在嘗試執行的 API 調用： const endpoint = ${API_URL}${fetchContentId}?api_key=${API_KEY} ; 根據我使用相同值的 URL，在傳入fetchContentId時我應該得到“tv/76479”。

問題：我將如何完成類似fetchContentId={dataId.media_type + "/" + dataId.id}

我想我需要編碼這個？ 但是在單擊“男孩”標題時，執行fetchContentId={encodeURIComponent(dataId.media_type + "/" + dataId.id)}在我的 URL 中給出了這個：http://localhost:3000/tv%2F76479。 也不完全確定我將如何解碼它。

<Grid header={searchTerm ? "Search Result" : "Trending TV Shows"}>
        {TV_Data.map((dataId) => (
          <Card
            key={dataId.id}
            clickable
            image={
              dataId.poster_path
                ? `${IMAGE_BASE_URL}${POSTER_SIZE}${dataId.poster_path}`
                : NoImage
            }
            voteAverage={dataId.vote_average}
            **fetchContentId={dataId.media_type + "/" + dataId.id}**
          />
        ))}
      </Grid>

Answer 1

您可以使用URL()來實現這一點。 它會自動處理路徑名和搜索參數。