Обнаружение багов в React‑компоненте

Условие

В этом задании необходимо найти и исправить ошибки в приведённом React‑компоненте.

 import React, {useEffect, useState} from 'react';
import {fetchTasks} from './tasks-api';

const ToDolist = ({ items }) => {
    return (
    <div>
    <ul>
    {items.length && items.map((item, index) => <li key={index}>{item.text}</li>)} 
    </ul>
    </div>
};
const App = () => {
    const [tasks, setTasks] = useState(null);
    const handleRefreshTasks = (e) =>{
    if (e.key = 'r') {
    const tasks = fetchTasks();
    setTasks(tasks);
    }
};

useEffect(() => {
    document.addEventListener('keydown', handleRefreshTasks);
});

return (
    <div>
    <h2>пример задач: </h2>
    <ToDolist items={[
    { id: 1, text: 'Полить цветы' },
    { id: 2, text: 'Помыть машину' },
    { id: 3, text: 'Выкинуть мусор' },
    ]}/>
    <h2>Сегодня:</h2>
    <ToDolist
    items={tasks}
    />
    <h2>Завтра:</h2>
    <ToDolist items={[]}/>
    </div>
};

export default App;

Ответ

В коде есть незакрытые return, присваивание вместо сравнения, null вместо массива, неубранный обработчик и вероятное сохранение Promise в state. Исправления нужны и в JSX, и в эффекте загрузки.

Закройте JSX-выражения через );, задайте useState([]), выводите items.map(...) без items.length &&: иначе для пустого списка появится 0. В качестве key используйте item.id. Условие должно быть e.key === 'r'.

Если fetchTasks возвращает Promise массива, эффект можно оформить так:

useEffect(() => {
  let active = true, requestId = 0;
  const onKey = async event => {
    if (event.key !== 'r') return;
    const id = ++requestId;
    try {
      const next = await fetchTasks();
      if (active && id === requestId) setTasks(next);
    } catch (error) {
      if (active && id === requestId) console.error(error);
    }
  };
  document.addEventListener('keydown', onKey);
  return () => { active = false; document.removeEventListener('keydown', onKey); };
}, []);

Счётчик не даёт старому ответу затереть новый. В рабочем интерфейсе ошибку лучше показать пользователю; глобальный hotkey также стоит игнорировать внутри полей ввода.