如何在反应中从http url获取id

Posted 2023-02-25

【中文标题】如何在反应中从http url获取id

【英文标题】：how to fetch id from http url in react

【发布时间】：2021-05-13 14:59:24

【问题描述】：

在我的代码中，当我在单选按钮上选择然后单击提交按钮然后 url 打开时，这很好。

但是当我选择单选按钮并单击提交按钮时，我想制作，然后 url 会打开并带有 id fetch

在api中根据row select获取id。

我的完整代码在这里请检查https://codesandbox.io/s/react-example-forked-hvisq?file=/index.js

我想在我选择行并单击提交按钮时进行此类型的 url 打开 http://commondatastorage.googleapis.com/codeskulptor-assets/space%20station.png/id/1 就像我选择行并单击按钮时在另一行上一样，然后此类型的 url 打开http://commondatastorage.googleapis.com/codeskulptor-assets/space%20station.png/id/2。

但现在它只是打开了 url，没有根据选择 http://commondatastorage.googleapis.com/codeskulptor-assets/space%20station.png 获取 id。

我们怎样才能做到这一点。任何想法

我的代码https://codesandbox.io/s/react-example-forked-hvisq?file=/index.js

 handleClick = () => 
    console.log(this.state.selectedId);
    const apiUrl = "https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e";
    if (this.state.selectedId) 
      console.log(this.state.selectedId);
      fetch(apiUrl)
        .then((response) => response.json())
        .then((data) => 
          this.setState( data: data );
          console.log("This is your data", data);
          switch (this.state.selectedId) 
            case "1":
              window.open(
                "http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/double_ship.png",
                "_blank"
              );
              break;
            case "2":
              window.open(
                "http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/double_ship.png",
                "_blank"
              );
              break;
            default:
              break;
          
        );
     else 
      alert("Data not fetched!");
    
  ;

谁能帮帮我，非常感谢。

【问题讨论】：

任何人请帮助我。非常感谢。我被困住了

url is open with id fetch 是什么意思？

@ShivamJha，当我选择行并单击提交按钮时，您可以看到我的代码codesandbox.io/s/react-example-forked-hvisq?file=/index.js，URL 已打开正常，但我想制作 id 为 commondatastorage.googleapis.com/codeskulptor-assets/… 的 url，就像这样

@ShivamJha 希望你明白我的意思。有可能这样做吗？？

@rennukumari 所以data 是一个对象数组，您想在data 数组中选择id 匹配this.state.selectedId 的对象的url。？跨度>

【参考方案1】：

我相信这很简单，除非我误解了这个问题。

这是分叉，我在 window.open 函数的第 48 行和第 54 行进行了更改。

https://codesandbox.io/s/react-example-forked-30glc

【参考方案2】：

您基本上只需将"/id/" + this.state.selectedId 部分添加到您的网址即可。

这是你想要的吗？

https://codesandbox.io/s/react-example-forked-wkrjw?file=/index.js

【参考方案3】：

如果我理解正确，data 是一个对象数组，看起来像，

  id: number,
  url: string

您希望在id 与this.state.selectedId 匹配的data 数组中选择对象的url。

您可以将 switch 语句替换为以下内容，

window.open(data.find((d) => d.id === Number(this.state.selectedId)).url);

分叉示例：https://codesandbox.io/s/react-example-forked-5mr12?file=/index.js