即使get在起作用，也没有显示数据

Question

我目前正在尝试获取在我的React应用程序上显示的数据。

我的查询设置为：

interface ResultWrapper<T> {
result: T;
}
export interface FinancialData {
handleViewData: () => void;
symbol: string;
name: string;
stockExchange: string;
exchangeShortName: string;
currency: string;
}

export const useGetFinancialDataKey = 'get-financial-data';

const useGetFinancialData = (
  options: UseQueryOptions<FinancialData[], string> = {}
): UseQueryResult<FinancialData[], string> =>
   useQuery<FinancialData[], string>(
   useGetFinancialDataKey,
     async () =>
     (await axiosInstance.get<ResultWrapper<FinancialData[]>>. 
     ('https://financialmodelingprep.com/api/v3/search? 
     query=AA&limit=10&exchange=NASDAQ&apikey=ENTERAPIKEY'
     )).data.result, options
     );


export default useGetFinancialData;

我已经检查了“网络”选项卡，并且回复回复：

但是，每当我转到主页时，什么也没有显示，每当我在finance.tsx文件中调用查询时，我

const {data: financialData} = useGetFinancialData();

在finance.tsx中使用完整文件时就会得到一个不确定的内容。tsx看起来像这样

    const Finance: React.FC = () => {
    const {data: financialData} = useGetFinancialData();
    const [searched, setSearched] = useState<string>('');
    const [dataToView, setDataToView] = useState<FinancialData>();
    const [isViewDialogOpen, setIsViewDialogOpen] = useState(false);
  
    const [page, setPage] = useState(0);
    const PER_PAGE = 10;
  
    const handleViewData = useCallback(
      (data: FinancialData) => {
        setDataToView(data)
        setIsViewDialogOpen(true);
      },
      [setDataToView, setIsViewDialogOpen]
    );
    const filteredRows = useMemo(()=>{
      const query = searched.toLowerCase();
      setPage(0);
    
      return financialData?.filter(
        (item) => 
        item.name.toLowerCase().includes(query)
      );
    }, [searched, financialData]);
  
    return (
        <Paper elevation={4}>
        <TableContainer>
        <Toolbar>
        <SearchBar
                placeholder="Search By Name"
                value={searched}
                onChange={(searchVal: string) => setSearched(searchVal)}
                onCancelSearch={() => setSearched('')}
              />
        </Toolbar>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Symbol</TableCell>
              <TableCell>Name</TableCell>
              <TableCell>Currency</TableCell>
              <TableCell>Stock Exchange</TableCell>
              <TableCell>Exchange Short Name</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {filteredRows &&
            filteredRows.slice(page * PER_PAGE, page * PER_PAGE + PER_PAGE)
            .map((row,i) => (
              <FinancialDataRow
              key = {row.name}
              handleViewData={() => handleViewData(row)}
              symbol={row.symbol}
              name={row.name}
              currency={row.currency}
              stockExchange={row.stockExchange}
              exchangeShortName={row.exchangeShortName}
              />
            ))}
          </TableBody>
        </Table>
        </TableContainer>
      </Paper>
    );
  };
   
  export default Finance;

：您可以从下面看到，即使数据被列出了，因为它被返回，因为它被返回了，即使获取了数据：

Answer 1

谢谢@windowsill的帮助。

export interface FinancialData {
handleViewData: () => void;
symbol: string;
name: string;
stockExchange: string;
exchangeShortName: string;
currency: string;
}

export const useGetFinancialDataKey = 'get-financial-data';

const useGetFinancialData = (
options: UseQueryOptions<FinancialData[], string> = {}
 ): UseQueryResult<FinancialData[], string> => 
 useQuery<FinancialData[], string>(
  useGetFinancialDataKey,
 async () =>
(await axiosInstance.get<FinancialData[]>('https://financialmodelingprep.com/api/v3/search?query=AA&limit=10&exchange=NASDAQ&apikey=blahblah'
))
.data,
options

);


 export default useGetFinancialData;