在React JS中转义数据值的正斜杠

如何解决在React JS中转义数据值的正斜杠

尝试学习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>

解决方法

您可以使用URL()来实现。它会自动处理路径名和搜索参数。