三元運算符 typescript 在反應真值時出錯 state

Question

我正在嘗試對表格進行排序，但出現以下錯誤：

(property) direction?: "asc" | "desc"
No overload matches this call.
  Overload 1 of 3, '(props: { href: string; } & { active?: boolean; direction?: "asc" | "desc"; hideSortIcon?: boolean; IconComponent?: ComponentType<{ className: string; }>; } & { action?: Ref<ButtonBaseActions>; ... 10 more ...; TouchRippleProps?: Partial<...>; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type 'string' is not assignable to type '"asc" | "desc"'.
  Overload 2 of 3, '(props: { component: ElementType<any>; } & { active?: boolean; direction?: "asc" | "desc"; hideSortIcon?: boolean; IconComponent?: ComponentType<{ className: string; }>; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type 'string' is not assignable to type '"asc" | "desc"'.
  Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<TableSortLabelTypeMap<{}, "span">>>): Element', gave the following error.
    Type 'string' is not assignable to type '"asc" | "desc"'.ts(2769)

import {
  Badge,
  Box,
  Drawer,
  IconButton,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableSortLabel,
  TableHead,
  TableRow,
  Tooltip
} from "@material-ui/core";
import { useEffect, useState } from "react";

function TeamsTableImpl({
  a
}: {
  a:number
}) {
  const [orderDirection, setOrderDirection] = useState('asc')
  const [valueToOrderBy, setValueToOrderBy] = useState('team')


  const handleRequestSort = (event: any, property: any) => {
    const isAscending = (valueToOrderBy === property && orderDirection === 'asc')
    setValueToOrderBy(property)
    setOrderDirection(isAscending ? 'desc' : 'asc')
  }
  

  const createSortHandler = (property: any) => (event: any) => {
    handleRequestSort(event, property)
  }

  console.log(orderDirection);
  console.log(typeof(orderDirection));
  const myorderDirection = "desc";
  console.log(typeof(myorderDirection))


  return (
    <Box>
      <TableContainer style={{ marginTop: 32 }}>
        <Table>
          <TableHead>
            <TableRow>

              <TableCell>
              Team
                <TableSortLabel 
                  active={valueToOrderBy === "team"}
                  // for some reason when orderDirection is passed as a state, this does not compile, even
                  // though the state value is a string that says 'desc' or 'asc', but if you hard code 
                  // a string in the ternary operator, even if it shows the same value and type, it works correctly.
                  // need to investigate further.

                  direction = { valueToOrderBy === 'team' ? orderDirection : 'asc' }
                  onClick={createSortHandler("team")}>
                    Team
                </TableSortLabel>
              </TableCell>
            </TableRow>
          </TableHead>
        </Table>
      </TableContainer> 
    </Box>
  );
}

如代碼中所述，如果 orderDirection 作為 state 傳遞，則上面的錯誤顯示，我已經驗證 typeof(orderDirection) 是一個字符串。 當我將一個名為 myorderDirection 的新變量設置為與 state orderDirection 相同的字符串時，它可以工作，但在傳遞 state 時它就不起作用。

我不知道為什么會這樣。

這是我正在使用的 react 和 material-ui 的版本。

"@material-ui/core": "^4.11.3",
"react": "^17.0.1"

Answer 1

只需強制執行 state 的類型： useState<'asc'|'desc'>('asc') 。 這樣orderDirection將是'asc'|'desc'而不是推斷的string 。

Answer 2

const [orderDirection, setOrderDirection] = useState<any>('asc')

or

const [orderDirection, setOrderDirection] = useState<'asc'|'desc'>('asc')

這會工作