map function not rendering jsx? Error: Objects are not valid as a React child

Question

我正在处理作业的评论功能。我正在尝试显示来自我的对象的评论的作者姓名。但是，我的地图功能似乎无法正常工作，因为每当我单击按钮时，我都会收到一条错误消息 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 无法将对象转换成任何有意义地适合 p标签。

改为这样做：

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

对于 React 有效渲染来说足够具体。

map function not rendering jsx? Error: Objects are not valid as a React child

map function not rendering jsx? Error: Objects are not valid as a React child

javascript

frontend

jsx

reactjs

mern