从后端获取数据导致无限循环并且永远无法成功加载

Question

这可能是我对此处显示的异步函数缺乏经验，但我遇到了一个问题，即我从后端获取模板进行反应的代码只是重复，而没有正确设置数据

import React, { useState} from 'react';
import './main.css';
import Frame from './Components/Frame';


function App() {
    const [view, setView] = useState(window.location.pathname);

    console.log('logging view ' + view);

    return (
        <div className="App container m-4">
            <Frame viewF={'nav'} />
            <div id='content'>
                <Frame viewF={view} />
            </div>
        </div>
    );

}

export default App;

主组件的

import React, { useState } from 'react';

function createMarkup(markup) {
    return { __html: markup };
}

const Frame = (props) => {
    const [content, setContent] = useState('');

    const contactBackend = async () => {
        try {
            const response = await fetch('http://localhost:5000/' + props.viewF, {
                'methods': 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            if (!response.ok) {
                throw Error(response.statusText);
            }
            //const data = response.json(); //alternate approach
            //console.log(data);
            setContent(response.json());

        } catch (error) {
            console.log(error);
        }
    }

    contactBackend();

    return (
        <div className="m-2" dangerouslySetInnerHTML={createMarkup(content)}>

        </div>
    )

};

export default Frame;

状态后端可以发送数据，它有效在早期和更简单的版本中。我还可以通过一些控制台日志查看返回值。但它最多放入返回的 div 中的是 [object Promise]，然后它会发送 1000 个请求，直到后端崩溃

Answer 1

该代码在函数体中无条件调用 contactBackend，结果是触发组件重新渲染的排队状态更新。这是无意的副作用。

通常，这在安装时在 useEffect 挂钩中调用。

response.json() 还返回一个 Promise，因此您还需要等待它解析。

例子：

useEffect(() => {
  const contactBackend = async () => {
    try {
      const response = await fetch('http://localhost:5000/' + props.viewF, 
        {
          'methods': 'GET',
          headers: {
          'Content-Type': 'application/json'
          }
        }
      );

      if (!response.ok) {
        throw Error(response.statusText);
      }

      const content = await response.json();
      setContent(content);
    } catch (error) {
      console.log(error);
    }
  }

  contactBackend();
}, []); // <-- empty dependency to run once after initial render