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('')

Answer 2

как и в ответе Фрэнка name_comment не определено, кажется.

const [name_comment, setNameComment] = useState("")
.....
function onSubmit(e){
e.preventDefault()

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

}

Answer 3

Вы не даете имя для name и nameComment, и кажется, что nameComment не определено.

Одно простое исправление - указать жестко закодированные значения:

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