reactjs - ts2339) 类型“{}”上不存在属性电话

Question

React-Router 接收代码

 import React from "react";
 import { Mutation } from "react-apollo";
 import { RouteComponentProps } from "react-router-dom";
 import { toast } from "react-toastify";
 import { LOG_USER_IN } from "../../sharedQueries.local";
 import { verifyPhone, verifyPhoneVariables } from "../../types/api";
 import VerifyPhonePresenter from "./VerifyPhonePresenter";
 import { VERIFY_PHONE } from "./VerifyPhoneQueries";

interface IState {
  verificationKey: string;
  phoneNumber:string; 
}

interface IProps extends RouteComponentProps<any> {}

class VerifyMutation extends Mutation<verifyPhone, 
verifyPhoneVariables> {}

class VerifyPhoneContainer extends React.Component<IProps, IState> {
 constructor(props: IProps) {
   super(props);
   if (!props.location.state) {
     props.history.push("/");
   }
   debugger;
   this.state = {
     phoneNumber: props.location.state.phone,
     verificationKey: ""
   };
 }

React-Router 发送代码

import React from "react";
import { Mutation, MutationFn } from "react-apollo";
import { RouteComponentProps } from "react-router-dom";
import { toast } from "react-toastify";
import {
  startPhoneVerification,
  startPhoneVerificationVariables
} from "../../types/api";
import PhoneLoginPresenter from "./PhoneLoginPresenter";
import { PHONE_SIGN_IN } from "./PhoneQueries";

interface IState {
  countryCode: string;
  phoneNumber: string;
}

class PhoneSignInMutation extends Mutation<
   startPhoneVerification,
   startPhoneVerificationVariables
 > {}

class PhoneLoginContainer extends React.Component<
   RouteComponentProps<any>,
   IState
> {
   public phoneMutation: MutationFn;
   public state = {
      countryCode: "+82",
      phoneNumber: ""
  };

  public render() {
    const { history } = this.props;
    const { countryCode, phoneNumber } = this.state;
    return (
     <PhoneSignInMutation
       mutation={PHONE_SIGN_IN}
       variables={{
         phoneNumber: `${countryCode}${phoneNumber}`
       }}
       onCompleted={data => {
         const { StartPhoneVerification } = data;
         const phone = `${countryCode}${phoneNumber}`;
         if (StartPhoneVerification.ok) {
           toast.success("SMS Sent! Redirecting you...");
           setTimeout(() => {
             history.push({
               pathname: "/verify-phone",
               state: {
                 phone
               }
             });
           }, 2000);
         } else {
        toast.error(StartPhoneVerification.error);
      }
    }}
  >
    {(phoneMutation, { loading }) => {
      this.phoneMutation = phoneMutation;
      return (
        <PhoneLoginPresenter
          countryCode={countryCode}
          phoneNumber={phoneNumber}
          onInputChange={this.onInputChange}
          onSubmit={this.onSubmit}
          loading={loading}
        />
      );
    }}
  </PhoneSignInMutation>
);

}

编译失败。类型“{}”上不存在属性“电话”。

请让我知道为什么会发生错误。

我打算用我的手机发短信和身份验证。

但是，将电话号码从上一页转到下一页时，会发生以下错误。

我正在使用翻译，因为我的英语不好。

标签： reactjstypescriptreact-router

Answer 1

我解决了

if (!props.location.state) {
         props.history.push("/");
       }
    const {
      location: { state }
    } = props;
    let phoneNumber = "";
    if (state) {
      phoneNumber = state.phone;
    } else {
      phoneNumber = "";
    }
    this.state = {
      phoneNumber,
      verificationKey: ""
    };