在第一次渲染时开始倒计时 N 个项目答案

【问题标题】：Start countdown for N number of items on first render在第一次渲染时开始倒计时 N 个项目
【发布时间】：2021-05-06 21:18:43
【问题描述】：

问题的场景是：

我有一个物品清单：

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 的新手。请不要无礼。

沙盒：https://codesandbox.io/s/condescending-platform-erqyc?file=/src/App.js

提前致谢

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

它可能存在一种更清洁的方式，但以下实现了您正在寻找的东西。

沙盒：https://codesandbox.io/s/thirsty-visvesvaraya-pw9u5

import "./styles.css";
import React, { useState, useEffect } from "react";

const items = [
  { name: "item 1", id: 0, time: 12 },
  { name: "item 2", id: 1, time: 5 },
  { name: "item 3", id: 2, time: 0 }
];

export default function App() {
  const [data, setData] = useState(items);
  return (
    <div className="App">
      {data.map((item) => (
        <div key={item.id}>
          <ItemDetails item={item} />
        </div>
      ))}
    </div>
  );
}

function ItemDetails({ item }) {
  const [time, setTime] = useState(item.time);
  const [intervalId, setIntervalId] = useState();
  
  //useEffect [no dependency] will run only on first render
  useEffect(() => {
    const interval = setInterval(() => {
      setTime((time) => time - 1);
    }, 1000);
    setIntervalId(interval);
    return () => clearInterval(interval);
  }, []);

  //useEffect will re-run on every [time or intervalId] update
  useEffect(() => {
    if (time < 1) {
      clearInterval(intervalId);
    }
  }, [time, intervalId]);

  return (
    <div>
      <span>{item.name}---</span>
      <span>Time left: {time}</span>
    </div>
  );
}

useEffect 文档：https://reactjs.org/docs/hooks-effect.html

【讨论】：

没问题！您能否将此答案标记为有效？