从 UI 中移除渲染数据

Question

我有一个组件可以依次打印 10 个数字。我还有一个按钮 Clean，单击它时必须删除这 10 个数字。我不确定如何实现它。

import { useState } from 'react'

export default function Timeout() {
  const [message, setMessage] = useState([1])
  const Markup = (
    <ul>
      {message?.map((n) => (
        <li>{n}</li>
      ))}
    </ul>
  )
  setTimeout(() => {
    if (message.length <= 9) {
      setMessage([...message, message[message.length - 1] + 1])
    }
  }, 1000)

  return (
    <div>
      <button>Clean</button>
      <div>{Markup}</div>
    </div>
  )
}

如果我添加 <button onClick={setMessage([])>Clean</button> 我得到 Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Answer 1

onClick 接受一个函数。将 onClick 设置为箭头函数应该可以修复无限循环。

<button onClick={()=>setMessage([])}> Clean </button>

从 UI 中移除渲染数据

Remove rendered data from UI

reactjs

react-hooks