javascript - Reactjs TypeError：无法读取未定义的属性“id”

Question

当我在元素中使用时，我遇到了问题“ TypeError: Cannot read property 'id' of undefined ” 。Grid

我面临的错误是这样的。

这是我的示例代码。

在这段代码中，只有我在使用时遇到了这个问题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>

这是我在该屏幕截图中的实际代码：

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>
    );
  }
}

标签： javascriptreactjs

Answer 1

因为你没有传递任何 props 给AddTriggerButton所以 props is {}。如此，成为。this.state.props_{}this.state.props.recordundefined

这不是很好的逻辑。您需要传递道具并this.props使用this.state.props

<AddTriggerButton 记录={{id: value}} />

更改this.state.props.record.id为this.props.record.id