Javascript 如何使用react js获取api数据

我试图做的是，当我点击表中第一行的复选框，然后点击提交按钮，那个么url图像就并没有打开

我想让当我点击复选框，然后点击提交按钮，然后url图像打开

我们怎样才能做到这一点呢？任何想法或帮助都是非常感谢的

我的代码

let ref=null；
类TableComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
selectedRow:“
};
ref=这个；
}
HandlerRowClick=async（rowID）=>{
//在这里进行API调用，比如
console.log（rowID）；
如果（rowID）{
常量url1=
"https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e?id=“+rowID；
//常量url2=
//   "https://grandiose-mulberry-garnet.glitch.me/params/“+rowID；
//常量url=”https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54";
//您可以使用上述任何API进行测试。
const response=wait fetch（url1）；
const res=wait response.json（）；
//console.log（res）
这是我的国家({
…res
});
打开（res.url，“_blank”）；
}
};
onSelectChange=（rowId）=>{
这是我的国家({
selectedRow:rowId
});
};
render（）{
var dataColumns=this.props.data.columns；
var dataRows=this.props.data.rows；
var tableHeaders=(
{" "}
{dataColumns.map（函数（列）{
返回{column}；
})}{" "}
{" "}
);
var tableBody=dataRows.map（（行）=>{
返回(
{dataColumns.map（函数（列）{
如果（列==“选择”）
返回(
ref.onSelectChange（row.id）}
/>
);
其他的
返回(
);
})}
);
});
//用引导CSS装饰
返回(
{tableHeaders}{tableBody}
this.handleRow单击（this.state.selectedRow）}
/>
);
}
}
//示例数据
var表格数据={
列：[“选择”、“服务名称”、“成本/单位”]，
行：[
{
服务名称：“airplan”，
“成本/单位”：50，
身份证号码：1
},
{
服务名称：“cat”，
“成本/单位”：50，
身份证号码：2
},
{
服务名称：“水果”，
“成本/单位”：50，
身份证号码：5
},
{
服务名称：“池”，
“成本/单位”：50，
身份证号码：4
}
]
};
ReactDOM.render(
,
document.getElementById（“表组件”）
);

有人帮我吗？您发出了一个REST请求，但JSON返回了一个数组，你得到了一个对象的

url

属性-看起来你需要得到你要找的特定项目的url。@carpeliam现在我用这个url作为api，它的url是否正确？我们怎么做？有什么想法吗？你能在代码中做些什么？不起作用，你发布了这是我的代码非常感谢你的帮助

let ref = null;
class TableComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRow: ""
    };
    ref = this;
  }

  handleRowClick = async (rowID) => {
    // make an API call here, sth like
    console.log(rowID);
    if (rowID) {
      const url1 =
        "https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e?id=" + rowID;
      // const url2 =
      //   "https://grandiose-mulberry-garnet.glitch.me/params/" + rowID;
      // const url = "https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54";
      // you can use any of the above API to test.
      const response = await fetch(url1);
      const res = await response.json();
      // console.log(res)
      this.setState({
        ...res
      });
      window.open(res.url, "_blank");
    }
  };

  onSelectChange = (rowId) => {
    this.setState({
      selectedRow: rowId
    });
  };

  render() {
    var dataColumns = this.props.data.columns;
    var dataRows = this.props.data.rows;

    var tableHeaders = (
      <thead>
        <tr>
          {" "}
          {dataColumns.map(function (column) {
            return <th> {column} </th>;
          })}{" "}
        </tr>{" "}
      </thead>
    );

    var tableBody = dataRows.map((row) => {
      return (
        <tr key={row.id}>
          {dataColumns.map(function (column) {
            if (column == "Select")
              return (
                <td>
                  <input
                    type="checkbox"
                    checked={ref.state.selectedRow === row.id}
                    onChange={() => ref.onSelectChange(row.id)}
                  />
                </td>
              );
            else
              return (
                <td>
                  <a target="_blank" rel="noopener noreferrer" href={row.url}>
                    {row[column]}
                  </a>
                </td>
              );
          })}
        </tr>
      );
    });

    // Decorate with Bootstrap CSS
    return (
      <div>
        <table className="table table-bordered table-hover" width="100%">
          {tableHeaders} {tableBody}
        </table>
        <input
          type="submit"
          value="submit"
          onClick={() => this.handleRowClick(this.state.selectedRow)}
        />
      </div>
    );
  }
}

// Example Data
var tableData = {
  columns: ["Select", "Service_Name", "Cost/Unit"],
  rows: [
    {
      Service_Name: "airplan",
      "Cost/Unit": 50,
      id: 1
    },
    {
      Service_Name: "cat",
      "Cost/Unit": 50,
      id: 2
    },
    {
      Service_Name: "fruits",
      "Cost/Unit": 50,
      id: 5
    },
    {
      Service_Name: "pool",
      "Cost/Unit": 50,
      id: 4
    }
  ]
};

ReactDOM.render(
  <TableComponent data={tableData} />,
  document.getElementById("table-component")
);

 handleRowClick = async (rowID) => {
    // make an API call here, sth like
    console.log(rowID);
    if (rowID) {
      const url1 =
        "https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e?id=" + rowID;
      // const url2 =
      //   "https://grandiose-mulberry-garnet.glitch.me/params/" + rowID;
      // const url = "https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54";
      // you can use any of the above API to test.
      const response = await fetch(url1);
      
      const res = await response.json();
      // alert(res.url)
      console.log(res)
      console.log("row id " + rowID)
      
       let object_ = {};
      
      res.map(item=>{
        // console.log(item.url)
        if(item.id === rowID){
          object_ = item;
        }
      })
      
      this.setState({
        ...res
      });
      window.open(object_.url, "_blank");
    }
  };