Javascript 当redux状态更改时更新react组件

我正在使用redux进行状态管理。我正在使用一个包含表和表单的组件来更新该表上的条目。我正在调用组件顶部的useSelector。我有一个排序函数，将useSelector中的数据传递给该函数，该函数对其进行排序并返回一个函数，然后将该函数映射到表中。但是，每次我在表单上添加或编辑条目时，排序功能都会失败。我注意到这是因为当dispatch中的数据更新时，组件不会重新渲染。我怎样才能解决这个问题？ ***组件***

function Users() {
  const classes = useStyles();
  const dispatch = useDispatch();
  const [ openPopup, setOpenPopup ] = useState(false);
  const [ loading ] = useFetchHook(fetchUsers());
  const { users } = useSelector((state) => state.user);
  const [ filterFunc, setFilterFunc ] = useState({
    func: (items) => {
      return items;
    }
  });
//Table hook where "users" data is passed and returns "recordsAfterSorting"
  const { TableContainer, TableHeader, TablePagination, recordsAfterSorting } = useTable(
    users
  );

return (

        <TableContainer>
          <TableHeader />

          <TableBody>
            {recordsAfterSorting().map((item) => (
              <TableRow key={item.id}>
                <TableCell>{item.id}</TableCell>
                <TableCell>
                  {item.firstname} {item.lastname}
                </TableCell>
                <TableCell>{item.is_admin ? 'Yes' : 'No'}</TableCell>

                <TableCell>
                  {/* <ActionButton color='primary' onClick={() => openInPopup(item)}>
                        <EditOutlined fontSize='small' />
                      </ActionButton> */}

                  <ActionButton
                    color='secondary'
                    onClick={() =>
                      setConfirmDialog({
                        isOpen: true,
                        title: `Are you sure you want to delete ${item.firstname}'s account?`,
                        subtitle: "You can't undo this operation",
                        onConfirm: () => {
                          handleDelete(item.id);
                        }
                      })}>
                    <Close fontSize='small' />
                  </ActionButton>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </TableContainer>

<Popup openPopup={openPopup} setOpenPopup={setOpenPopup} title='Add New User'>
        <Registration recordForEdit={recordForEdit} addOrEdit={addOrEdit} />
      </Popup>
     <ConfirmDialog confirmDialog={confirmDialog} setConfirmDialog={setConfirmDialog} />
    )
}

---

不要将

记录

传递给

useTable（）

直接传递给

recordsatersorting（）

fn，如下所示：

const recordsAfterSorting = (records) =>
    stableSort(filterFunc.func(records), getComparator(order, orderBy)).slice(
      page * rowsPerPage,
      (page + 1) * rowsPerPage
    );

recordsAfterSorting(users).map((item) => (

我猜记录相当于

用户

，所以你可以这样使用它：

const recordsAfterSorting = (records) =>
    stableSort(filterFunc.func(records), getComparator(order, orderBy)).slice(
      page * rowsPerPage,
      (page + 1) * rowsPerPage
    );

recordsAfterSorting(users).map((item) => (

---

这应该可以解决这个问题

用户的初始值是多少？我无法解构这些，它们只是可使用参数的变量名。如果解构用户，则无法映射到阵列。用户是一个数组。对不起，我的意思是这些值只是传递到表钩子中。我想这就是问题所在，我不确定在

useTable

fn中传递的值是否是预期的参数。您传递到

useTable

fn的参数：

用户

预期的参数：

记录
，
头细胞
，
filterFunc
好的，我认为这基本上是因为
recordsatersorting
fn无法访问更新的
记录