有没有更好的方法来处理接口并摆脱 'TypeErrors'？

Question

我在我的 ReactJS 项目中陷入了 TypeError。错误：

Server Error:
TypeError: Cannot read properties of undefined (reading 'phoneNumber')
---------------------------------------------------------------------------------------
Source:
~/components/index.tsx (74:28)
> 74 | phoneNumber: props.data.manager.phoneNumber,

下面的代码是编译器声称有 TypeError.

const {
    register,
    handleSubmit,
    setValue,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(formSchema),
    defaultValues: defaultValues,
});

interface DataProps {
  id: number;
  accountTypeEnum: string;
  phoneNumber: string;
}
//The function below is inside the main function. I didn't paste the entire code so this question doesn't get too much big
const defaultValues: DataProps = {
    id: props.data.id,
    accountTypeEnum: props.data.accountTypeEnum,
    phoneNumber: props.data.manager.phoneNumber, //here's where the error occurs
  }

所以在那之后我有一个表单将用于更改用户的信息。基本上，表单以 defaultValues 开头，因此用户可以根据需要进行更改。

return(
 <Form>
  <Input
     name="phone"
     type={"text"}
     label="Phone Number"
     error={errors.phoneNumber}
     mask="phone"
     {...register("phone")}
   />
 </Form>
);

当我删除 74º 线时，页面呈现但信息不显示。我知道这是因为 phoneNumber 未定义，但我真的不知道如何解决。如您所见，我是 Typescript 的新手。你可以 click here to see the entire typescript file on Pastebin.

Answer 1

因此，每当您看到这样的错误时，通常意味着 phoneNumber 之前的点左侧的任何内容都未定义。在这种情况下，可能是您的 props.data.manager 未定义。仔细检查您是否忘记将其作为道具传递。

有没有更好的方法来处理接口并摆脱 'TypeErrors'？

Is there a better way to work with interfaces and get rid of 'TypeErrors'?

typeerror

typescript

reactjs

react-props