React Redux Type Error: Cannot read properties of undefined (reading 'comment')

Question

我是 React 的新手，正在构建一个简单的应用程序，当我尝试向照片添加评论时出现此错误，代码正在运行，当我按下 Enter 时状态正在正确更改我在这一行中的错误 const photo = photos.find((item) => item.id === Number(photo_id)); 照片已定义且 ID 已定义，但我得到的照片未定义如果有人能提供帮助，我真的很感激这是代码

import { useNavigate, useParams } from 'react-router-dom';
import { useSelector, connect } from 'react-redux'
import Photo from './Photo';
import { useState } from 'react';
import { addComment } from './actions'

const PhotoDetail = ({ addComment }) => {
    const {photo_id} = useParams();
    const navigate = useNavigate();
    const [text, setText] = useState('');
    const photos = useSelector((state) => state.photoList.photos);
    const photo = photos.find((item) => item.id === Number(photo_id));
    console.log('here photo id', photo_id)
    console.log('here photo', photo)
    console.log('here photos', photos)
    const comments = photo['comment'];
    
    const handelKeyDown = (e) => {
        if (e.key === "Enter") {
            const commentData = {text, photo_id}
            addComment(commentData);
            // navigate('/' + photo.id);
        }
    }

    return (
        <div className="detail">
            <div className="photos photoDetail">
                <Photo key={photo.id} photo={photo}/>
            </div>
            <div>
                <h2>Comments</h2>
                
                <div>
                    { comments.map((comment) => (
                        <p key={comment.id}>{comment.text}</p>
                    )) }
                </div>
                <input type="text" value={text} onChange = {
                    (e) => setText(e.target.value)
                } onKeyDown={
                    handelKeyDown
                }/>
            </div>
        </div>
    );
}
const mapDispatchToProps = dispatch => ({
    addComment: commentData => dispatch(addComment(commentData))
})
export default connect(null, mapDispatchToProps) (PhotoDetail);

这是行动

export const addComment = (commentData) => {
    console.log('test')
    return {
      type:"ADDCOMMENT",
      payload: commentData
    };
  };

这是 Reducer

case "ADDCOMMENT":
            const idx = Math.floor(Math.random() * 10000) + 1;
            const { text, photo_id } = action.payload;
            const newComment = {idx, text}
            return { ...state, photos:[state.photos.map((image) =>
            image.id === photo_id ? image.comment.push(newComment) && image : image),] }

控制台 the console

Answer 1

find 将 return undefined 以防没有符合要求的条件。

所以，看起来 item.id === Number(photo_id) 可能 not 解析为true 对于 photo in photos.

那么，您正在尝试访问 undefined 上的 comment，这就是出现 TypeError 的原因。

Answer 2

在 action payload photo_id 中有字符串类型，在 reducer 中你添加了 === 检查但是 image.id 持有数字类型。

已添加，在下面的代码中添加注释，以便您更好地理解。

case "ADDCOMMENT":
            const idx = Math.floor(Math.random() * 10000) + 1;
            const { text, photo_id } = action.payload;
            const newComment = {idx, text}
            return { ...state, photos:[state.photos.map((image) =>
            
            // HERE below condition fails always bcz of strict type check, to photo_id 
            //- either add Number convertion or in payload itself send string type 
            image.id === photo_id ? image.comment.push(newComment) && image : image),] }

Answer 3

谢谢你们，你们的回答很有帮助，但我改变了逻辑我已经有了照片我不需要贴图扔掉照片所以我只需将评论添加到照片和 return 状态即可！

case "ADDCOMMENT":
        const idx = Math.floor(Math.random() * 10000) + 1;
        const { text, photo } = action.payload;
        console.log('the photo from reducer', photo)
        const newComment = {idx, text};
        photo.comment.push(newComment) // adding the comment to the photo
        // return { ...state, photos:[state.photos.map((image) =>
        // Number(image.id) === Number(photo.id) ? image.comment.push(newComment) && image : image),] }
        return state;

React Redux Type Error: Cannot read properties of undefined (reading 'comment')

React Redux Type Error: Cannot read properties of undefined (reading 'comment')

reactjs

redux