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

Question

我在@material-ui/core上使用Select组件，但遇到以下问题：

无法读取空的属性"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

这个错误可以很简单地解决：删除useEffect钩子中的"current"：

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

因为在您使用的示例中有几个组件，但您只有一个组件，"当前"是多余的。