Javascript 第一次渲染时N个项目的开始倒计时

问题的情况是：

我有一个项目清单：

const items = [
  { name: "item 1", enabled: true, id: 0, timeleft: 50 },
  { name: "item 2", enabled: true, id: 1, timeleft: 120 },
  { name: "item 3", enabled: true, id: 2, timeleft: 0 }
];

我正在尝试显示从“timeleft”开始的每个项目的倒计时，并在timeleft达到0时停止。倒计时应在第一次渲染时开始

我是react.js的新手。请不要无礼

沙箱：

---

提前感谢

这可能是一种更干净的方法，但下面的内容可以满足您的需求

沙箱：

导入“/styles.css”； 从“React”导入React，{useState，useffect}； 常数项=[ {名称：“项目1”，id:0，时间：12}， {名称：“项目2”，id:1，时间：5}， {名称：“项目3”，id:2，时间：0} ]; 导出默认函数App（）{ const[data，setData]=使用状态（项）； 返回( {data.map（（项）=>( ))} ); } 函数ItemDetails（{item}）{ const[time，setTime]=使用状态（item.time）； const[intervalId，setIntervalId]=useState（）； //useEffect[无依赖项]将仅在第一次渲染时运行 useffect（（）=>{ 常量间隔=设置间隔（（）=>{ 设置时间（（时间）=>时间-1）； }, 1000); setIntervalId（间隔）； return（）=>clearInterval（interval）； }, []); //useEffect将在每次[时间或有效期]更新时重新运行 useffect（（）=>{ 如果（时间<1）{ clearInterval（intervalId）； } }，[时间，有效期]； 返回( {item.name}--- 剩余时间：{Time} );

---

}它可以工作。谢谢。没问题！你能把这个答案标记为有效吗？