0

我有对象数组[{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，以便：

  • 仅当数组中有新的 id时才重新渲染主组件（一个带间隔的组件）
  • 行组件仅在其对象已更改时才重新渲染

我尝试了什么： 我当前解决方案的 Playground 示例。我尝试了很多 atomFamily/中间选择器试验。但最终得到了近 4-5 个选择器，这样我就可以在更改时将数组转换为对象，另一个用于提取键，另一个用于按键选择对象。但它看起来非常冗长/复杂。

我做错了吗？

4

0 回答 0