对象作为 React 子级无效 - firebase 数据库，axios答案

【问题标题】：Objects are not valid as a React child - firebase database, axios对象作为 React 子级无效 - firebase 数据库，axios
【发布时间】：2020-06-11 22:21:42
【问题描述】：

我正在编写一个教程，我使用 firebase 创建后端内容，然后使用 react 创建前端。我收到说错误，我认为这与我的代码行有关：this.state.screams.map((scream) => <Scream scream={scream} />)。我不知道如何解决它。任何有关如何编写此内容的帮助将不胜感激。

我在 jsfiddle 上编写了我的代码。谢谢！

https://jsfiddle.net/cvizena/8r3vpkdz/3/

// Scream.js
import React, { Component } from 'react';
import withStyles from '@material-ui/core/styles/withStyles';
import Link from 'react-router-dom/Link';

// MUI Stuff
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Typorgraphy from '@material-ui/core/Typography';
import Typography from '@material-ui/core/Typography';

const styles = {
  card: {
    display: 'flex',
    marginBottom: 20
  },
  image: {
    minWidth: 200
  },
  content: {
    padding: 25,
    objectFit: 'cover'
  }
};

class Scream extends Component {
  render() {
    const {
      classes,
      scream: {
        body,
        createdAt,
        userImage,
        userHandle,
        screamId,
        likeCount,
        commentCount
      }
    } = this.props;
    return (
      <Card className={classes.card}>
        <CardMedia
          image={userImage}
          title="Profile image"
          className={classes.image}/>
        <CardContent class={classes.content}>
          <Typorgraphy variant="h5">{userHandle}</Typorgraphy>
          <Typography variant="body2" color="textSecondary">{createdAt}
          </Typography>
          <Typography variant="body1">{body}</Typography>
        </CardContent>
      </Card>
    );
  }
}


// home.js

import React, { Component } from 'react';
import axios from 'axios';
import Grid from '@material-ui/core/Grid';

import Scream from '../components/Scream';

class home extends Component {
  state = {
    screams: null
  };
  componentDidMount() {
    axios
      .get('/screams')
      .then((res) => {
        console.log(res.data);
        this.setState({
          screams: res.data
        });
      })
      .catch((err) => console.log(err));
  }
  render() {
    let recentScreamsMarkup = this.state.screams ? (
      this.state.screams.map((scream) => <Scream scream={scream} />)
    ) : (
      <p>Loading...</p>
    );
    return (
      <Grid container spacing={16}>
        <Grid item sm={8} xs={12}>
          {recentScreamsMarkup}
        </Grid>
        <Grid item sm={4} xs={12}>
          <p>Profile...</p>
        </Grid>
      </Grid>
    );
  }
}

【问题讨论】：

小提琴给出了不同的错误，重复的 React 声明。

标签： reactjs firebase axios

【解决方案1】：

jsx代码应该在return语句里面，试试这个代码

  render() {
    return this.state.screams ? (
      <Grid container spacing={16}>
        <Grid item sm={8} xs={12}>
          {this.state.screams.map((scream) => <Scream scream={scream} />}
        </Grid>
        <Grid item sm={4} xs={12}>
          <p>Profile...</p>
        </Grid>
      </Grid>
    ) : (
      <p>Loading...</p>
    );
  }

或者您也可以将recentScreamsMarkup 赋值放在渲染函数之外

【讨论】：

它仍然是同样的错误..错误：对象作为 React 子级无效（找到：带有键 {_seconds，_nanoseconds} 的对象）。如果您打算渲染一组子项，请改用数组。我认为它与 class Scream extends Component { render() { const { classes,scream: { body, createdAt, userImage, userHandle,screamId, likeCount, commentCount } } = this.props; 有关
你能说出scream 对象的样子吗？似乎body、createdAt 或 userHandle 这个道具之一是一个对象
2 个常量。由于我正在使用 axios 访问 firebase 集合，因此集合尖叫的详细信息是每个描述符（即 userHandle、body 等）。代码是：class Scream extends Component { render() { const { classes,scream: { body, createdAt, userImage, userHandle,screamId, likeCount, commentCount } } = this.props;
我的意思是你在 axios 调用 res.data 中得到的对象，然后你保存在尖叫状态

【解决方案2】：

发生错误是因为您在 this.state.screams 上使用了 map - 将 this.state.screams 分配给一个变量，然后在该变量上调用 map。

 let screamsVariable = this.state.screams
    let recentScreamsMarkup = screamsVariable ? (
      screamsVariable.map((scream) => <Scream scream={scream} />)
    ) : (
      <p>Loading...</p>
    );

【讨论】：

谢谢，罗斯 - 我遇到了同样的问题。太沮丧了！
不，它没有。我遇到了同样的问题
尝试将尖叫声的初始状态改为空数组

【解决方案3】：

某个好心人刚刚帮助了我并向我解释了这个问题：

“createdAt 的值是一个带有错误消息描述的键的对象。你必须告诉 React 如何渲染它。解除阻塞的简单方法如下所示：

新日期(createdAt._seconds * 1000).toString()"

感谢你们的帮助！

【讨论】：