如何将api响应存储在变量中并通过它来响应弹出式视频播放器

Question

使用fetch调用API并在控制台上打印。

app.js

const onGridReady = (params) => {
console.log("grid is ready");
fetch("http://localhost:8000/get_all")
.then((resp) => resp.json())
.then((resp) => {
console.log(resp.results);
params.api.applyTransaction({ add: resp.results });
});
};

使用fetch调用API并在控制台上打印。

api响应:

Array(80)
0:
Camera_Number: "Camera_1"
Company_Name: "Fraction Analytics Limited"
Floor Number: "Ground_Floor"
Group_Name: "Group_1"
Video_Name: "http://localhost:4000/video/0"
[[Prototype]]: Object
1:
Camera_Number: "Camera_2"
Company_Name: "Fraction Analytics Limited"
Floor Number: "Ground_Floor"
Group_Name: "Group_1"
Video_Name: "http://localhost:4000/video/1"

这个响应是从API得到的。现在如何在react js变量中存储API响应。存储数据后如何通过Video_Name:"http://localhost:4000/video/*"来反应玩家源

将此响应分配给react表:

const columnDefs = [
{ headerName: "Name", field: "Company_Name", filter: "agSetColumnFilter" },
{ headerName: "Floor", field: "Floor Number" },
{ headerName: "Group", field: "Group_Name" },
{ headerName: "Camera", field: "Camera_Number" },
{ headerName: "Videos", field: "Video_Name" },
{
headerName: "Actions",
field: "Video_Name",
cellRendererFramework: (params) => (
<div>
<Button
variant="contained"
size="medium"
color="primary"
onClick={() => actionButton(params)}
>
Play
</Button>
</div>
),
},
];

<DialogContent>
<iframe
width="420"
height="315"
title="videos"
src={("http://localhost:4000/video/0", "http://localhost:4000/video/1")}
/>
</DialogContent>;

更多代码请参考

点击这里

Answer 1

你应该使用useState钩子来存储来自API的响应

const [response, setResponse] = useState([]);
const onGridReady = (params) => {
console.log("grid is ready");
fetch("http://localhost:8000/get_all")
.then((resp) => resp.json())
.then((resp) => {
setResponse(resp.results);
params.api.applyTransaction({ add: resp.results });
});
};

最后在iframe中使用数组，并为每个链接输出一个iframe。

<DialogContent>
{response.map(({Video_Name})=> 
<iframe
width="420"
height="315"
title="videos"
src={Video_Name}
/>
)}
</DialogContent>;

Answer 2

不需要使用按钮的click处理程序。你不能用它来获取行数据

将colId添加到操作的列定义中。然后处理网格的onCellClicked动作。您可以使用params.node.data获取行数据。

const [videoName, setVideoName] = useState("");
function onCellClicked(params) {
// maps to colId: "action" in columnDefs,
if (params.column.colId === "action") {
// set videoName for the row
setVideoName(params.node.data.Video_Name);
setOpen(true);
}
}
// grid config
<AgGridReact
...
rowData={response}
onCellClicked={onCellClicked}>
</AgGridReact>
// access videoName in dialog content
<DialogContent>
{/* <iframe width="420" height="315" title="videos" src={id} /> */}
<div>{videoName}</div>
</DialogContent>

code and box Link