當用戶點擊卡片時嘗試顯示卡片詳細信息，但收到我傳遞的道具的“未定義”錯誤

Question

我不明白這個問題。 我正在嘗試制作一個應用程序，向用戶提供評論列表，當他們點擊一個評論時，他們將被重定向到一個顯示該評論詳細信息的頁面。 這是我的 ReviewCard.js 文件：

import React from 'react';
import { reviews } from '../data';
import StarRatings from 'react-star-ratings';
import './Review.css';  

 const ReviewCard= ({ review }) => {
  return (  
    <div class="card-deck">
      {reviews.map((review) => {
        return (
         <div class="card">
          <div key={review.id}>
            <h4 class="card-title">{review.place}</h4>
            <StarRatings
                rating={review.rating}
                starRatedColor="gold" 
                starDimension="20px"
                />
            <div class="card-body">{review.content}</div>
            <div class="card-footer">{review.author} - {review.published_at}</div> 
            
      </div>
      </div>
        );
      })}
      </div> 
          );
      };
  
export default ReviewCard;

和我的 ReviewCollection.js 文件：

import React from 'react';
import ReviewCard from './ReviewCard';

class ReviewCollection extends React.Component {

    goToDetails = (review) => {
        localStorage.setReview('selectedReview', review);
        this.props.history.push('/details');
      };

      render() {
          return (
            <div onClick={() => this.goToDetails(review)}>
                <div className='card-collection'>
                    {this.props.reviews.data
                    .filter((review, idx) => idx < 24)
                    .map((review) => (
                     <ReviewCard key={review.id} review={review} 
                     />
                    ))}
            </div>
        </div>
          )
      }
}

export default ReviewCollection;

我從 Review Collection 組件收到一條錯誤消息，指出“Review”未定義。 我不明白為什么會這樣。

Answer 1

<div onClick={() => this.goToDetails(review)}>在這里，您正在發送review ，但它沒有在任何地方定義。

我認為您需要將 onClick function 包含在.map() function 中

{this.props.reviews.data
.filter((review, idx) => idx < 24)
.map((review) => (
  <div onClick={() => this.goToDetails(review)}>
    <ReviewCard key={review.id} review={review} />
  </div>
))}

Answer 2

import React from 'react';
import ReviewCard from './ReviewCard';
import { reviews } from '../data';
import {reactLocalStorage} from 'reactjs-localstorage';
import { browserHistory } from 'react-router';

class ReviewCollection extends React.Component {

    goToDetails = (review) => {
        reactLocalStorage.set('selectedReview', review);
       browserHistory.push('/details');
      };

      render() {
          return (
                <div className='card-collection'>
                    {reviews
                    .filter((review, idx) => idx < 24)
                    .map((review) => (
                     <div onClick={() => this.goToDetails(review)}>
                     <ReviewCard key={review.id} review={review} />
                      </div>
                    ))}
            </div>
          )
      }
}

export default ReviewCollection;