Reactjs 类型错误：无法读取未定义的属性“id”

Question

I facing problem " TypeError: Cannot read property 'id' of undefined " when i using Grid in elements.

the error i facing like this.

Here is my sample code.

In this code only i am facing the issue when im using Grid

<ThemeProvider theme={theme}>
      <Card>
        <Edit {...props}>
          <SimpleForm>
            <Grid container spacing={1} align="center">
              <Grid item sm={6}>
                <ReferenceInput
                  source="appId"
                  reference="_apps"
                  allowEmpty
                  defaultValue={
                    props.location.data ? props.location.data.appId : ""
                  }
                  validate={required()}
                >
                  <SelectInput optionText="label" />
                </ReferenceInput>
              </Grid>
              <Grid item sm={6}>
                <SelectInput
                  source="iconColor"
                  choices={[
                    { id: "primary", name: "primary" },
                    { id: "secondary", name: "secondary" },
                    { id: "action", name: "action" },
                    { id: "disabled", name: "disabled" },
                  ]}
                />
              </Grid>
              <Grid item sm={6}>
                <ReferenceManyField
                  label={"resources._fields.name"}
                  reference="_fields"
                  target="eid"
                >
                  <Datagrid>
                    <TextInput type="text" source="label" />
                    <TextInput type="text" source="component" />
                    <BooleanField source="showInList" />
                    <BooleanField source="showInFilter" />
                    <BooleanField source="showInCreate" />
                    <BooleanField source="showInEdit" />
                    <BooleanField source="showInShow" />
                    <EditButton />
                  </Datagrid>
                </ReferenceManyField>
              </Grid>
              <Grid item sm={6}>
                <ReferenceManyField
                  label={"resources._triggers.name"}
                  reference="_triggers"
                  target="eid"
                >
                  <Datagrid>
                    <TextInput type="text" source="name" />
                    <BooleanField source="beforeInsert" />
                    <BooleanField source="afterInsert" />
                    <BooleanField source="beforeUpdate" />
                    <BooleanField source="afterUpdate" />
                    <BooleanField source="beforeDelete" />
                    <BooleanField source="afterDelete" />
                    <EditButton />
                  </Datagrid>
                </ReferenceManyField>
              </Grid>
              <Grid item sm={6}>
               <AddTriggerButton />
               <AddFieldButton />
              </Grid>
            </Grid>
          </SimpleForm>
        </Edit>
      </Card>
    </ThemeProvider>

This is my actual code in that screenshot:

const TriggerButton = ({ children, to, ...props }) => {
  const CustomLink = React.useMemo(
    () =>
      React.forwardRef((linkProps, ref) => (
        <StyledLink ref={ref} to={to} {...linkProps} />
      )),
    [to]
  );

  return (
    <Button {...props} component={CustomLink}>
      {children}
    </Button>
  );
};

export default class AddTriggerButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      props: props,
    };
  }

  render() {
    return (
      <div>
        <TriggerButton
          component={Link}
          to={{
            pathname: "/_triggers/create",
            data: { eid: this.state.props.record.id },
          }}
          startIcon={<AddIcon />}
        >
          New Trigger
        </TriggerButton>
      </div>
    );
  }
}

Answer 1

Because you don't pass any props to AddTriggerButton so props is {} . So this.state.props is {} and this.state.props.record become undefined .

This is not good logic. You need to pass props and use this.props instead this.state.props

<AddTriggerButton record={{id: value}} />

Change this.state.props.record.id to this.props.record.id

Answer 2

Try to console.log(this.state.props.record.id) and shate here the reault. How you defined your the props? Maybe there is an asynchronous problem, so try to put '?' before the id like this: this.state.props.record?.id