小编Dra*_*era的帖子

我有以下界面：

export interface DataResponse {
  user_id: string;
  name: string;
  phone_number: string;
  country: string;
}

它用作通过反应查询获取数据的类型。如果有数据，我正在使用 useEffect 填充字段：

useEffect(() => {
    if (userData) {
      Object.entries(userData).forEach(
        ([name, value]) => setValue(name, value));
    }
}, [setValue, userData]);

userData 的类型是 DataResponse...当我用它设置值时，setState(name, value)它会在名称下划线并引发以下错误：

Argument of type 'string' is not assignable to parameter of type | "name" | "phone_number" | "country"

我得到以下代码：

loggedInAxios.interceptors.request.use(
  async (config) => {
    if (isTokenExpired('access_token')) {
      const response = await getRefreshToken();
      await refreshAccessToken(response);
    }
    const accessToken = localStorage.getItem('access_token');
    config.headers.Authorization = `Bearer ${accessToken}`;
    return config;
  },
  (error) => error
);

但打字稿抱怨 config.headers.Authorization 对象可能未定义。

我通过添加以下内容找到了一种方法：

if (!config) {
 config = {};
}
if (!config.headers) {
  config.headers = {};
}

但我不认为这是最好的方法......

我得到以下代码：

export default function CancelledPayment() {

  const linkPage = <Link to="/dashboard/payment" className={clsx(classes.paymentLinkTypography, classes.link)}> here </Link>;

  return (
    <Container>
      <Paper >
        <Paper />
        <Typography>
          {` To go back to your order please click ${linkPage}.You will be redirect in ${count} seconds.`}
        </Typography>
      </Paper>
    </Container>
  );
}

知道为什么它返回 linkPage 作为 [object Object] 吗？计数器是正确的，一切正常，只是这个链接页面不正常。如果我把它拿出来：

To go back to your order please click {linkPage}. {`You will be redirect in ${count} seconds.`}

它工作正常，在其他一些情况下也是如此，但我希望所有内容都在一行中，使用模板字符串。

import {
  createMuiTheme, responsiveFontSizes,
} from "@material-ui/core/styles";

let theme = createMuiTheme({
  palette: {
    primary: {
      main: "#000",
    },
    secondary: {
      main: "#ccc",
    },
  },
  typography: {
    fontFamily: "Roboto",
  },
  shadows: [
    "none",
    "0px 15px 60px rgba(0, 0, 0, 0.25)",
    "0px 35px 60px rgba(0, 0, 0, 0.25)",
    "20px 55px 60px rgba(0, 0, 0, 0.25)",
    "10px 15px 60px rgba(0, 0, 0, 0.25)",
  ],
});

theme = responsiveFontSizes(theme);

export default theme;

控制台中有一条警告：警告：失败的道具类型：Material-UI：此高度4未在组件中实现。既然它是一个包含 25 个元素的数组，应该怎么做呢？

我有 PaymentMethodPage，如下所示：

import React, { FC, useState } from 'react';
import { Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import {
  getClientSecret,
} from '../../api/PaymentCalls/PaymentCalls';
import PaymentMethodSetupForm from './PaymentMethodSetupForm/PaymentMethodSetupForm';
import AddPaymentMethodContainer from './AddPaymentMethodContainer/AddPaymentMethodContainer';
import {
  ClientSecretResponse,
} from '../../interfaces/paymentMethod.interface';


const stripePromise = loadStripe(
  process.env.REACT_APP_STRIPE_PUBLIC_KEY as string
);

const PaymentMethodPage: FC = () => {
  const [enableAddPaymentMethod, setEnableAddPaymentMethod] =
    useState<boolean>(false);

  const {
    data: clientSecretKeyData,
  }: UseQueryResult<ClientSecretResponse, ExtendedError> = useQuery<
    ClientSecretResponse,
    ExtendedError
  >('getClientSecret', getClientSecret, {
    retry: false,
    refetchOnWindowFocus: false, …