添加新评论时出现“无法读取未定义的属性”错误

Question

添加评论时出现错误

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'fullName')

Source
components\Comment\index.tsx (53:50) @ fullName

  51 | <div className={styles.comment}>
  52 |   <div className={styles.userInfo}>
> 53 |     <Avatar style={{ marginRight: 10 }}>{user.fullName[0]}</Avatar>
     |                                              ^
  54 |     <b>{user.fullName}</b>
  55 |     <span>{createdAt}</span>
  56 |   </div>

刷新页面后，我创建的评论会出现在页面上，并正确显示，并带有头像名称。我可以删除它，但我无法确定为什么创建它时会出现错误

添加评论的表单代码

import React from 'react'
import Input from '@material-ui/core/Input'
import styles from './AddCommentForm.module.scss'
import { Button } from '@material-ui/core'
import { Api } from '../../utils/api'
import { CommentItem } from '../../utils/api/types'

interface AddCommentFormProps {
  postId: number
  onSuccessAdd: (obj: CommentItem) => void
}

export const AddCommentForm: React.FC<AddCommentFormProps> = ({ postId, onSuccessAdd }) => {
  const [clicked, setClicked] = React.useState(false)
  const [isLoading, setLoading] = React.useState(false)
  const [text, setText] = React.useState('')

  const onAddComment = async () => {
    try {
      setLoading(true)
      const comment = await Api().comment.create({
        postId,
        text,
      })
      onSuccessAdd(comment)
      setClicked(false)
      setText('')
    } catch (err) {
      console.warn('Add comment', err)
      alert('Ошибка при отправке комментария')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className={styles.form}>
      <Input
        disabled={isLoading}
        onChange={e => setText(e.target.value)}
        value={text}
        onFocus={() => setClicked(true)}
        minRows={clicked ? 5 : 1}
        classes={{ root: styles.fieldRoot }}
        placeholder='Написать комментарий...'
        fullWidth
        multiline
      />
      {clicked && (
        <Button
          disabled={isLoading}
          onClick={onAddComment}
          className={styles.addButton}
          variant='contained'
          color='primary'
        >
          Опубликовать
        </Button>
      )}
    </div>
  )
}

评论表单代码

import React from 'react'
import { Typography, IconButton, MenuItem, Menu, Avatar } from '@material-ui/core'
import MoreIcon from '@material-ui/icons/MoreHorizOutlined'

import styles from './Comment.module.scss'
import { ResponseUser } from '../../utils/api/types'
import { Api } from '../../utils/api'

interface CommentPostProps {
  id: number
  user: ResponseUser
  text: string
  createdAt: string
  currentUserId: number
  onRemove: (id: number) => void
}

export const Comment: React.FC<CommentPostProps> = ({
  id,
  user,
  text,
  createdAt,
  currentUserId,
  onRemove,
}) => {
  const [anchorEl, setAnchorEl] = React.useState(null)

  const handleClick = event => {
    setAnchorEl(event.currentTarget)
  }

  const handleClose = () => {
    setAnchorEl(null)
  }

  const handleClickRemove = async () => {
    if (window.confirm('Удалить комментарий?')) {
      try {
        await Api().comment.remove(id)
        onRemove(id)
      } catch (err) {
        console.warn('Error remove comment', err)
        alert('Не удалось удалить комментарий')
      } finally {
        handleClose()
      }
    }
  }

  return (
    <div className={styles.comment}>
      <div className={styles.userInfo}>
        <Avatar style={{ marginRight: 10 }}>{user.fullName[0]}</Avatar>
        <b>{user.fullName}</b>
        <span>{createdAt}</span>
      </div>
      <Typography className={styles.text}>{text}</Typography>
      {user.id === currentUserId && (
        <>
          <span className={styles.replyBtn}>Ответить</span>
          <IconButton onClick={handleClick}>
            <MoreIcon />
          </IconButton>
          <Menu
            anchorEl={anchorEl}
            elevation={2}
            open={Boolean(anchorEl)}
            onClose={handleClose}
            keepMounted
          >
            <MenuItem onClick={handleClickRemove}>Удалить</MenuItem>
            <MenuItem onClick={handleClose}>Редактировать</MenuItem>
          </Menu>
        </>
      )}
    </div>
  )
}

如果稍后刷新页面，新评论将会显示在页面上。

检查了所有道具路径和后端链接

Answer 1

试试这个，添加一个“？” item前面，例如item.name，改为item?.name