javascript - ReactJS 与 firebase.add 未定义错误

Question

我正在学习 ReactJS 和 Firebase。我的代码工作正常，但是当我决定使用我网站上的表单将另一个字段添加到我的数据库时，它向我显示一个未定义的错误。我尝试对这些值进行硬编码，但 name_comment 不会更改 firebase 数据库中的值。下面显示了我的代码和错误的屏幕截图。

我的代码:

const AddProfList = () => {
    const [name, setName] = useState('')
    const [rating, setRating] = useState('')
    const [comment, setComment] = useState('')
    const classes = useStyles();

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

    function onSubmit(e){
        e.preventDefault()

        console.log()

        firebase
            .firestore()
            .collection('names')
            .add({
                name,
                name_comment: 'comment',
                name_rating: parseInt(rating),
            })
            .then(() => {
                setName('') 
                setRating('')
                setComment('')
            })
    }

    return(
        <Paper className={classes.paper}>
            <form onSubmit = {onSubmit}>
                <h2>Add Professor Rating</h2>
                    <div className={classes.root} noValidate autoComplete="off">
                        <TextField 
                            id="outlined-basic" 
                            label="Prof's Name" 
                            variant="outlined" 
                            type="text" 
                            value={name} 
                            onChange={e => setName(e.currentTarget.value)}
                        />
                    </div>
                    <FormControl variant="outlined" className={classes.formControl}>
                        <InputLabel id="demo-simple-select-outlined-label">Rating</InputLabel>
                        <Select
                            labelId="demo-simple-select-outlined-label"
                            id="demo-simple-select-outlined"
                            value={rating}
                            onChange={handleChange}
                            label="Rating"
                        >
                                <MenuItem value={1}>1</MenuItem>
                                <MenuItem value={2}>2</MenuItem>
                                <MenuItem value={3}>3</MenuItem>
                                <MenuItem value={4}>4</MenuItem>
                                <MenuItem value={5}>5</MenuItem>
                                <MenuItem value={6}>6</MenuItem>
                                <MenuItem value={7}>7</MenuItem>
                                <MenuItem value={8}>8</MenuItem>
                                <MenuItem value={9}>9</MenuItem>
                                <MenuItem value={10}>10</MenuItem>
                        </Select>
                    </FormControl>
                <div className={classes.multilineSize}>
                    <TextField
                        id="outlined-multiline"
                        label="Comment"
                        multiline
                        rows={4}
                        variant="outlined"
                        type="text"
                        value={comment}
                        onChange={e => setComment(e.currentTarget.value)}
                    />
                </div>
                <div className="button-margin">
                    <Button type="submit" variant="contained" color="primary">
                        Submit Rating
                    </Button>
                </div>
            </form>
        </Paper>
    );
}

错误消息截图:

Answer 1

我已经解决了这个问题。我将 const [comment, setComment] = useState('') 更改为 const [name_comment, setComment] = useState('')