React js @ material-ui / core选择无法读取null的属性'offsetWidth'

Question

我正在使用Select上的@material-ui/core组件，但是出现以下问题：

无法读取null的属性'offsetWidth'

你能帮帮我吗？

链接：codesandbox

代码：

import React from "react";
import {
  Button,
  DialogTitle,
  Dialog,
  DialogContent,
  DialogActions,
  TextField,
  FormControl,
  InputLabel,
  MenuItem,
  Select
} from "@material-ui/core";

function AddUserModal(props) {
  const inputLabelTypeRole = React.useRef(null);
  const { open, onClose } = props;
  const [state, setState] = React.useState({
    labelWidthTypeRole: 0,
    name: ""
  });
  let { labelWidthTypeRole } = state;

  React.useEffect(() => {
    setState({
      ...state,
      labelWidthTypeRole: inputLabelTypeRole.current.offsetWidth
    });
  }, []);

  const onChange = name => ({ target: { value } }) => {
    setState({
      ...state,
      [name]: value
    });
  };

  const [currency, setCurrency] = React.useState(false);

  const handleChange = event => {
    setCurrency(event.target.value);
  };

  return (
    <Dialog
      fullWidth
      maxWidth="md"
      open={open}
      onClose={onClose}
      aria-labelledby="max-width-dialog-title"
    >
      <DialogTitle id="form-dialog-title" style={{ alignSelf: "center" }}>
        Add User
      </DialogTitle>
      <DialogContent>
        <div style={{ margin: 5 }}>
          <TextField
            margin="dense"
            id="name"
            label="Name"
            type="Name"
            fullWidth
            variant="outlined"
            onChange={onChange("name")}
          />
        </div>
        <div style={{ margin: 5 }}>
          <FormControl variant="outlined" fullWidth size="small">
            <InputLabel
              ref={inputLabelTypeRole}
              id="demo-simple-select-outlined-label"
            >
              Role
            </InputLabel>
            <Select
              labelId="demo-simple-select-outlined-label"
              id="demo-simple-select-outlined"
              labelWidth={labelWidthTypeRole}
              value={false}
            >
              <MenuItem value={false}>Report</MenuItem>
              <MenuItem value>Report Web hook</MenuItem>
            </Select>
          </FormControl>
        </div>

        <div style={{ margin: 5 }}>
          <TextField
            id="outlined-select-currency"
            select
            label="Select"
            helperText="Please select your currency"
            variant="outlined"
            fullWidth
            value={currency}
            onChange={handleChange}
          >
            <MenuItem value={false}>Report</MenuItem>
            <MenuItem value>Report Web hook</MenuItem>
          </TextField>
        </div>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} color="primary" variant="contained">
          Create
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export default function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <div className="App">
      <AddUserModal open={open} onClose={() => setOpen(false)} />
      <button onClick={() => setOpen(true)}>Open</button>
    </div>
  );
}

Answer 1

您将inputLabelTypeRole设置为React.useRef(null)，这意味着inputLabelTypeRole.current在第一个渲染中将是null。并且null不具有属性offsetWidth，因此错误。

以下内容似乎可以在codesandbox中解决此问题。注意?. optional chaining运算符。

setState({
  ...state,
  // labelWidthTypeRole: inputLabelTypeRole.current.offsetWidth // won't work
  labelWidthTypeRole: inputLabelTypeRole.current?.offsetWidth // works, using optional chaining
});