setTimeout react

Question

У меня есть массив объектов

const initialData = [
    { id: 0, name: "PHP-разработчик", completed: true },
    { id: 1, name: "Android-разработчик", completed: true },
    { id: 2, name: "Frontend-разработчик", completed: false },
    { id: 3, name: "Инженер инфраструктуры, DevOps", completed: false },
    { id: 4, name: "Linux-администратор", completed: false },
    { id: 5, name: "Anykey-специалист", completed: false },
    { id: 6, name: "Web-разработчик", completed: false },
    { id: 7, name: "IT-директор", completed: false },
    { id: 8, name: "Product-менеджер", completed: false },
    { id: 9, name: "Backend-разработчик", completed: false },
    { id: 10, name: "Golang-разработчик", completed: false },
    { id: 11, name: "Java-разработчик", completed: false },
    { id: 12, name: "Python-разработчик", completed: false },
    { id: 13, name: "Bitrix-разработчик", completed: false },
    { id: 14, name: "1C-разработчик", completed: false },
    { id: 15, name: "IT-предприниматель", completed: false },
    { id: 16, name: "HR-специалист", completed: false },
    { id: 17, name: "QA-инженер", completed: false },
    { id: 18, name: "UI/UX-дизайнер", completed: false },
    { id: 19, name: "Project-менеджер", completed: false },
    { id: 20, name: "Специалист Data Science", completed: false }
];

export default function ListProf(props) {
    const toggle = (id) => {
        id++
        const tgl = props.value.map(item => {
            if (item.id) {
                item.completed = !item.completed
            }
            return { ...item, completed: !item.completed }
        })
        return tgl
    }

    const listProfRight = props.value.map(item => {
        let current = item.id
        if (toggle(current)) {
            if (item.completed) {
                if (item.id % 2 != 0) {
                    return <div className={style.item__list} key={current}>
                            {item.name}
                        </div>;
                }
            }
        }
        toggle(current)
    })

    return (
        <div className={style.main__block}>
            <div className={style.list}>
                <div className={style.block__prof}>
                    <div className={style.item__prof} >
                        {listProfRight}
                    </div>
                </div>
            </div>
        </div>
    );
};

Незнаю как сделать так чтоб через каждые 1-2 секунды completed менялся с false на true

Answer 1

чтоб через каждые 1-2 секунды completed менялся с false на true

Могу предложить вот такой вариант...

const initialData = [{
    id: 0,
    name: "PHP-разработчик",
    completed: true
  },
  {
    id: 1,
    name: "Android-разработчик",
    completed: true
  },
  {
    id: 2,
    name: "Frontend-разработчик",
    completed: false
  },
  {
    id: 3,
    name: "Инженер инфраструктуры, DevOps",
    completed: false
  },
  {
    id: 4,
    name: "Linux-администратор",
    completed: false
  },
  {
    id: 5,
    name: "Anykey-специалист",
    completed: false
  },
  {
    id: 6,
    name: "Web-разработчик",
    completed: false
  },
  {
    id: 7,
    name: "IT-директор",
    completed: false
  },
  {
    id: 8,
    name: "Product-менеджер",
    completed: false
  },
  {
    id: 9,
    name: "Backend-разработчик",
    completed: false
  },
  {
    id: 10,
    name: "Golang-разработчик",
    completed: false
  },
  {
    id: 11,
    name: "Java-разработчик",
    completed: false
  },
  {
    id: 12,
    name: "Python-разработчик",
    completed: false
  },
  {
    id: 13,
    name: "Bitrix-разработчик",
    completed: false
  },
  {
    id: 14,
    name: "1C-разработчик",
    completed: false
  },
  {
    id: 15,
    name: "IT-предприниматель",
    completed: false
  },
  {
    id: 16,
    name: "HR-специалист",
    completed: false
  },
  {
    id: 17,
    name: "QA-инженер",
    completed: false
  },
  {
    id: 18,
    name: "UI/UX-дизайнер",
    completed: false
  },
  {
    id: 19,
    name: "Project-менеджер",
    completed: false
  },
  {
    id: 20,
    name: "Специалист Data Science",
    completed: false
  }
]
//
const List = props => {
  const [arr, setArr] = React.useState(initialData)
  const [i, setI] = React.useState(0)
  React.useEffect(_ => {
    const ds = setInterval(_ => {
      setArr(arr.map((o, j) => j === i ? {...o, completed: !o.completed} : o))
      setI((i + 1) % arr.length)
    }, 1000)
    return _ => clearInterval(ds)
  })
  return <table>
    <tbody>
      {arr.map(o => <Row key={o.id} data={o} />)}
    </tbody>
  </table>
}
//
function Row({data}) {
  const arr = ['name', 'completed']
  return <tr>
    {arr.map(k => <td key={k}>{data[k].toString()}</td>)}
  </tr>
}
const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<List />);

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>


<div id="like_button_container"></div>

БЛОГ НА HUSL

setTimeout react

Ответы (1 шт):