Question

我写了一个简短的应用程序来刷新每秒的时间，但是它不起作用

function add() {
  const element = (

    <h1>
      hello, {formatName(user)}
        <h2>
          The time is {(new.Date().toLocaleTimeString())}
        </h2>
    </h1>

  );
  setInterval(add, 1000);
}

// Render function
function App() {
  return (
    add();
  );
}

export default App;
setInterval(App, 1000);

这是我得到的错误： App（...）：渲染未返回任何内容。这通常意味着缺少return语句。或者，要不显示任何内容，请返回null。

Answer 1

App（）函数正在返回add（）返回的数据。由于函数add（）仅声明一个const，然后再次调用其自身，并且不返回任何数据，因此最终将不返回任何内容，从而导致错误。如果您在该函数的末尾添加一个返回值（我猜该值将是元素变量），那么它将起作用。

我还注意到，在运行代码时可能会发生运行时错误，因为您以每秒调用App()的时间间隔开始。 App()然后每秒调用一次add()，每秒调用一次。这将创建n个间隔，该间隔将根据程序运行的时间呈指数增加，最终会自行崩溃。

要解决此问题，取决于您希望该程序的运行方式，因为您还没有明确说明您想做什么。但是，如果我们假设您只是想每秒运行一次该函数，那么删除setInterval()中的add()函数将解决此问题。

固定代码

function add() {
  const element = (

    <h1>
      hello, {formatName(user)}
        <h2>
          The time is {(new.Date().toLocaleTimeString())}
        </h2>
    </h1>

  );
  // setInterval(add, 1000); Remove this to avoid runtime error
  return element; /* A return value is needed if 
  function App() itself is returning this function, that means
  whichever value this function returns is returned to App.
  If there is no return, then nothing is sent back,
  therefore "nothing" was returned from render */
}

// Render function
function App() {
  return (
    add();
  );
}

export default App;
setInterval(App, 1000);

“ {渲染未返回任何内容”是什么意思？

1 个答案: