Question

我无法获得userType的值来在条件满足时使用它。

UserType：

const RadioForm = (props) => {
    return (
        <div>
            <label>Customer</label>
            <input
                type="radio"
                value="Customer"
                checked={props.userType === "Customer"}
                onChange={(e) => {props.setUserType(e.target.value)}}
            />

            <br />

            <label>Vendor</label>
            <input
                type="radio"
                value="Vendor"
                checked={props.userType === "Vendor"}
                onChange={(e) => {props.setUserType(e.target.value)}}
            />
        </div>
    )
}

登录页面：

interface LoginCardProps {
  userType: string;
  setUserType: string;
}

const LoginCard: React.FC<LoginCardProps> = props => {
  const {userType, setUserType } = props;

   return (
    <RadioForm
       userType={userType}
       setUserType={setUserType}
     />
    )

我要实现的目标：

我将使用userType变量在条件语句中使用它。

const GetUserType: LoginCardProps = {
  if (userType === "Customer") {
    return <Customer />
  }
  else if (userType === "Vendor") {
    return <Vendor/>
  }
}

但是我总是会收到此错误：

由于类型'{if（userType：any）：any ;，此条件将始终返回'false'。 }”和“字符串”没有重叠。

@Raja的回答

const GetUserType = ({userType}: LoginCardProps) => {
        if (userType === "Customer") {
          return <Customer />
        } else if (userType === "Vendor") {
          return <Vendor/>
        }
      }

感谢您将其清除给我。但我遇到了新的错误

Type '{}' is missing the following properties from type 'LoginCardProps': userType, setUserType

我已经在登录名中定义了它：

const [userType, setUserType] = useState("Admin");

  return (
    <LoginPage
      userType={userType}
      setUserType={setUserType}
    />
  );

Answer 1

就像您将对象文字语法定义为带有返回类型错误一样，期望GetUserType应该是功能组件，而props类型应该是LoginCardProps。

  const GetUserType = ({userType}: LoginCardProps) => {
        if (userType === "Customer") {
          return <Customer />
        } else if (userType === "Vendor") {
          return <Vendor/>
        }
      }

如何从接口获取值并将其用于其他功能

1 个答案: