【问题标题】：JavaScript not working when getting content through api通过 api 获取内容时 JavaScript 不工作
【发布时间】：2021-04-14 04:35:16
【问题描述】：

  import React, { useEffect, useState } from "react";

  const Test = () => {

    useEffect(() => {
      let url = "http://127.0.0.1:8000"
      fetch(url)
      .then(res => res.text())
      .then(res => {
      document.getElementById("content").innerHTML = res;
      })
    }, [])

    return (
      <div id="content">
      </div>
    )
  }

  export default Test;

我的后端代码作为响应给出了什么

       <!DOCTYPE html>
   <html>
 <head>
{% load static %}
<meta charset="utf-8"/>
<title> Velodrivers </title>
  </head>
 <body>
<div>
    <canvas id="output"></canvas>
    <video id="video" playsinline style="
          -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
          visibility: hidden;
          width: auto;
          height: auto;
          ">
    </video>
</div>

<div>
    <label for="color"> Color {{ pallet }} </label>
    <input id="color" type="color" value="" />

    <label for="opacity"> Strength </label>
    <input id="opacity" type="range" min="0" max="1" step="0.01"/>
</div>
</body>

 <script src='{% static "main.js" %}'></script>

   </html>

我的后端将响应作为包含 html css 和 javascript 的 html 元素返回。从反应中，我正在进行 api 调用并获取 html 内容以及添加到 innerHTML。但是 javascript 功能不起作用。

后端 html 代码会打开无法在此处工作的网络摄像头，因为它是使用 javascript 打开的。

请看看我怎样才能让它工作。

【问题讨论】：

标签： javascript reactjs api

【解决方案1】：

你正在使用 react 和 state 需要像这样使用：

import React, { useEffect, useState } from "react";

  const Test = () => {

    const [data, setData] = useState([]);

    useEffect(() => {
      let url = "http://127.0.0.1:8000"
      fetch(url)
      .then(res => res.text())
      .then(res => {
      //document.getElementById("content").innerHTML = res;
      setData(res)
      })
    }, [])

    return (
      <div id="content">

      {data.map((item)=> {
       <li>{item.name}</li> 
      })}
      </div>
    )
  }

  export default Test;

【讨论】：

【解决方案2】：

问题

document.getElementById("content").innerHTML = res; 是直接的 DOM 突变，是 React 中的反模式。

解决方案

React 通过存储状态和更新状态来工作。当状态更新时，组件将使用更新后的状态重新呈现。见useState。

由于您似乎是从后端发送原始 HTML，因此您可以通过 dangerouslySetInnerHTML 对其进行清理和呈现

import React, { useEffect, useState } from "react";

const Test = () => {
  const [data, setData] = useState(null); // <-- create state

  useEffect(() => {
    let url = "http://127.0.0.1:8000"
    fetch(url)
    .then(res => res.text())
    .then(res => {
      setData(res); // <-- update state
    })
  }, [])

  return (
    <div id="content">
      {data && <div dangerouslySetInnerHTML={{ __html: data }} />} // <-- render html
    </div>
  )
}

【讨论】：