反应挂钩状态对象过时的回调

Question

我是新来的反应者，我使用钩子api并想弄清楚反应如何跟踪状态。

我试图构建一个表组件，该组件将列配置和行作为输入。列具有回调函数，例如，当单击列标题时，将调用这些回调函数，以便父级可以对行进行排序。但是，在调用回调时，行始终设置为默认值。为什么会这样呢？是因为closuer如何在javascript中工作？有什么方法可以访问回调函数中项目的“最新”状态？

这是我的组件https://codepen.io/Abrissirba/pen/OJyPvXx的简化版。首先添加几行，然后单击“列1”对表进行排序。项目现在将设置为初始值，因此消失的添加行。

function DetailsListHookComponent({items, columns}) { 
  return (
    <table>
      <thead>
        <tr>
          {columns.map(x => (<td key={x.key} onClick={() => x.onClick(x)}>{x.title}</td>))}
        </tr>
      </thead>
      <tbody>
      {items.map(x => {
       return (
        <tr key={x.id}>
          {columns.map(y => <td key={y.key}>{x[y.key]}</td>)}
        </tr>)
      })}
    </tbody>
    </table>
  )
}

let newId = 3;
function ContainerComponent() {
  const [items, setItems] = React.useState([
    {id: 1, 1: 1, 2:2}, 
    {id: 2, 1:10, 2:20}
  ]);

  const [columns, setColumns] = React.useState([{
    key: 1,
    title: 'Column 1',
    sortOrder: '1',
    onClick: (column) => {
      const dir = column.sortOrder * -1;
      setItems([...items.sort((a, b) => {
        const order = a['1'] > b['1'] ? 1 : a['1'] < b['1'] ? -1 : 0;
        return order * dir;
      })]);

      setColumns([{
        ...column, 
        sortOrder: dir
      }]);
    }
  }]);

  return (
    <>
      <DetailsListHookComponent items={items} columns={columns}></DetailsListHookComponent>
      <button onClick={() => setItems([...items, {id: newId++, 1: newId*10, 2: newId*20}])}>Add</button>
    </>
  )
}