Блог

У меня есть массив объектов [{id: 1, data:{}}, {id: 2, data: {}}] . Я хочу отобразить таблицу так, чтобы повторно отображалась только строка, которая изменяется,

Одна загвоздка в том, что этот массив обновляется каждые 500 мс (могут изменяться только ссылочные данные), я мог бы, наконец, решить проблему, но код выглядит уродливо !

пример:

 const App = () => {
  const [data, setData] = useState([ {id: 1, data:{}}, {id: 2, data: {}} ]);
  setInterval( () => setData([...data]), 500);
  // real app does changes to some rows.
  return <table>
    {data.map(row => (
      <tr key={row.id}>
       <th>{row.id}</th>
       <td>{`${row.data}`}</td> 
      </tr>
    ))}
  </table>
}
 

в приведенном выше примере компонент будет перерисовываться каждые 500 мс. теперь цель состоит в том, чтобы преобразовать это в recoiljs, чтобы:

• Основной компонент (один с интервалом) перерисовывается только в том случае, если в массиве есть новые идентификаторы
• Компонент строки перерисовывается только в том случае, если его объект изменился

Игровая площадка пример моего текущего решения, которое я попробовал
:. Я перепробовал множество испытаний atomFamily/ промежуточных селекторов. но в итоге получилось почти 4-5 селекторов только для того, чтобы я мог преобразовать массив в объект при изменении, а еще один-для извлечения ключей и еще один-для выбора объекта по ключу. но это выглядело очень многословно/сложно.

Неужели я сделал это неправильно ?