map function 不渲染 jsx？ 錯誤：對象作為 React 子項無效

Question

我正在處理我的作業的評論功能。 我正在嘗試顯示來自我的 object 的評論的作者姓名。但是，我的 map function 似乎不起作用，因為每當我單擊該按鈕時，我都會收到一條錯誤消息，提示Error: Objects are not valid as a React child (found: object with keys {roles, _id, username, email, password, __v}). If you meant to render a collection of children, use an array instead. Error: Objects are not valid as a React child (found: object with keys {roles, _id, username, email, password, __v}). If you meant to render a collection of children, use an array instead.

評論，js

import React, {useState, useRef} from 'react';
import Axios from 'axios';
import {Button, Input} from 'antd';
import authService from '../../services/auth.service'
import authHeader from '../../services/auth-header';
import FirstReview from './FirstReview';

const {TextArea} = Input;

const Reviews = (props) => {

    const currentUser = authService.getCurrentUser();

    const [review, setReview] = useState('');

    const handleChange = (e) => {
        setReview(e.target.value)
    }

    const onSubmit = (e) => {
        e.preventDefault();

        const variables = {
            movieId: props.movieId,
            content: review,
            author: currentUser.id,
            reviewId: props.reviewId,
        }

        Axios.post('http://localhost:8080/api/review/addReview', variables,{ headers: authHeader()})
        .then(response=> {
            if(response.data.success) {
                setReview("")
                props.refreshFunction(response.data.result)
            } else {
                alert('Failed to save review')
            }
        })
    }

    return (
        <div>
                <p>Reviews</p>
                {props.reviewList && props.reviewList.map((review, index) => (
                    (!review.responseTo &&
                    <React.Fragment key={review._id}>
                        <FirstReview review={review} movieId={props.movieId} refreshFunction={props.refreshFunctions}/>
                    </React.Fragment>
                )))}
                <form style={{display: 'flex'}} onSubmit>
                    <TextArea
                        style={{width: '100%', borderRadius: '5px'}}
                        placeholder = "leave a review"
                        value={review}
                        onChange={handleChange}
                        />
                        <Button style = {{width: '20%', height: '52px'}} onClick={onSubmit}></Button>
                </form>
        </div>
    );
};

export default Reviews

FirstReview.js

import React from 'react'
import { Button, Comment, Form, Header, TextArea } from 'semantic-ui-react'

const action = [
  <span onClick key="comment-basic-reply-to">reply</span>
]


function FirstReview(props) {

  // const authorName = props.review.author;

  // const author = {
  //   authorName: authorName
  // }

  return (
    <div>
      <Comment>
        <Comment.Content>
          <Comment.Author as='a'> {props.review.author} </Comment.Author>
        </Comment.Content>
      </Comment>
      

        <form style={{display: 'flex'}} onSubmit>
                    <TextArea
                        style={{width: '100%', borderRadius: '5px'}}
                        placeholder = "leave a review"
                        value={Comment}
                        onChange
                        />
                </form>
    </div>
  )
}

export default FirstReview

我有一個名為 movie-info.component 的文件，它有一個使用 Review 組件的容器。

 <Container2>
            <Reviews refreshFunction={updateReview} reviewList={reviewList} movieId={movieInfo?.id}/>
          </Container2>

Answer 1

這是一個作業問題，所以我不能給你完整的答案，但你的錯誤信息意味着你正在做一個object有點這樣：

let thing = { first_name: "Tom", last_name: "Jack" }

然后這樣做：

<p>{thing}</p>

盡管您可能希望在上面看到“Tom Jack”，但您會收到您建議的錯誤，因為 React 無法將 object 轉換為任何有意義地適合p標簽的內容。

改為這樣做：

<p>{thing.first_name + thing.last_name}</p>

這足以讓 React 有效地渲染。