react-dom.production.min.js：216 TypeError：无法在生产环境中读取未定义的属性“拆分”答案

【问题标题】：react-dom.production.min.js:216 TypeError: Cannot read property 'split' of undefined on production environmentreact-dom.production.min.js：216 TypeError：无法在生产环境中读取未定义的属性“拆分”
【发布时间】：2021-04-15 01:50:34
【问题描述】：

每次我将我的 react 应用程序部署到 Heroku 时都会遇到这个问题：

const TodoSuggestion = () => {
    const classes = useStyles();
    const {register, handleSubmit, errors, setValue} = useForm();
    const [navData, setNavData] = useState(SUGGEST_NAVBAR_DATA);

    const onSubmit = (data) => {
        console.log(data)
    }

    React.useEffect(() => {
        register("fullName");
        register("todoTitle");
        register("todoDescription");
    }, [register])

    return (
        <div>
            <Navbar navData={navData}></Navbar>
            <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh'}}>
                <form onSubmit={handleSubmit(onSubmit)}>
                    <Grid container spacing={2}>
                        <Grid item xs={12}>
                            <Typography variant="h6" className={classes.Typography}>
                                <Box m={1} letterSpacing={6}>
                                    Send Me Your Creative Todo Ideas
                                </Box>
                            </Typography>
                        </Grid>
                        <ThemeProvider theme={theme}>
                            <Grid item xs={12}>
                                <TextField
                                    className={classes.margin}
                                    label="Your Full Name"
                                    variant="outlined"
                                    id="fullName"
                                    ref={register({required: true})}
                                    inputRef={register} name="fullName"
                                />
                            </Grid>
                            <Grid item xs={12}>
                                <TextField
                                    className={classes.margin}
                                    label="Title of the Todo"
                                    variant="outlined"
                                    id="todoTitle"
                                    ref={register({required: true})}
                                    inputRef={register} name="todoTitle"
                                />
                            </Grid>
                            <Grid item xs={12}>
                                <TextField
                                    className={classes.margin}
                                    label="Description of the Todo"
                                    variant="outlined"
                                    id="todoDescription"
                                    ref={register({required: true})}
                                    inputRef={register} name="todoDescription"
                                />
                            </Grid>
                        </ThemeProvider>
                    </Grid>
                    <BootstrapButton variant="contained" style={{backgroundColor: "darkslategray"}} disableRipple type="submit"
                                     className={classes.margin}>
                        <WhiteTextTypography variant="h6" className={classes.title}>
                            <Box m={1} letterSpacing={6}>
                                Send Request
                            </Box>
                        </WhiteTextTypography>
                    </BootstrapButton>
                </form>
            </div>
        </div>
    );

}



export default TodoSuggestion;

知道是什么问题吗？该代码在本地工作，但是，一旦部署到 Heroku，它就会生成上述错误。我已经搜索了一个类似的错误，但无法解决问题。

我正在使用以下构建包： https://github.com/mars/create-react-app-buildpack

我看到一个问题可能是组件加载了多次。但是，即使包含 useEffect 仍然会发生相同的错误。

【问题讨论】：

标签： reactjs react-hooks react-hook-form

【解决方案1】：

查看您的代码示例，我认为您正在使用带有 react-hook-form 的 material-ui。

我发现了 2 个问题，希望对您有所帮助。

你不需要那个useEffect 部分

    React.useEffect(() => {
        register("fullName");
        register("todoTitle");
        register("todoDescription");
    }, [register])

Material UI 不需要此部分。

只使用inputRef，而不是ref。

将代码设为

<TextField
   className={classes.margin}
   label="Your Full Name"
   variant="outlined"
   id="fullName"
   inputRef={register({required: true})}
   name="fullName"
/>

【讨论】：

我所做的是我删除了 ref={register({required: true})} 并将 inputRef 保持原样并且它工作。谢谢你。