मेरे मुख्य Home.js कंपोनेंट में, मुझे अपने डेटाबेस से अपना (चीख) डेटा मिल रहा है। (मैं इसे सफलतापूर्वक प्राप्त कर रहा हूं) मैं उस डेटा को किसी अन्य घटक (Scream.js) में प्रस्तुत कर रहा हूं। मैं प्रॉप्स का उपयोग करके उस डेटा को होम में पास कर रहा हूं लेकिन मुझे वह त्रुटि मिल रही है।

त्रुटि: ऑब्जेक्ट एक प्रतिक्रिया बच्चे के रूप में मान्य नहीं हैं (पाया गया: ऑब्जेक्ट के साथ कुंजी {_सेकंड, _नैनोसेकंड})। यदि आप बच्चों का संग्रह प्रस्तुत करना चाहते हैं, तो इसके बजाय एक सरणी का उपयोग करें।

मुझे वास्तव में यह नहीं मिला !!

घर

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

    export class home extends Component {
        state = {
        screams: null
    }
    componentDidMount() {
        axios.get('/screams')
            .then(res => {
                console.log(res.data)
                this.setState({
                    screams: res.data // Thats where the error is Comming // //But thats already an array
                })
            })
            .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>
        )
    }
}

export default home

चीख घटक

    import React, { Component } from 'react'

import withStyles from '@material-ui/core/styles/withStyles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Typography from '@material-ui/core/Typography';

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

export default withStyles(styles)(Scream);
0
daniel ragimov 10 फरवरी 2021, 01:03
क्या आप render फंक्शन की बॉडी भी जोड़ सकते हैं? रिएक्ट इस तरह की त्रुटि को प्रिंट करने का कारण शायद इसके ठीक अंदर है।
 – 
Aitwar
10 फरवरी 2021, 01:19
क्या आप समझा सकते हैं कि आपका क्या मतलब है :)
 – 
daniel ragimov
10 फरवरी 2021, 01:20
return स्टेटमेंट गायब है - मैं केवल शब्द देख सकता हूं, लेकिन इसके अलावा कुछ भी नहीं।
 – 
Aitwar
10 फरवरी 2021, 01:22
ओह ज़रूर एक मिनट प्लीज
 – 
daniel ragimov
10 फरवरी 2021, 01:23
1
 – 
Aitwar
10 फरवरी 2021, 01:33

1 उत्तर

सबसे बढ़िया उत्तर

चैट में समस्या का समाधान किया गया। निम्नलिखित पोस्ट निष्कर्षों और समाधानों का सारांश है।

console.log(res.data) ने निम्नलिखित परिणाम दिए:

(12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 
0: {screamId: "sOO4pudfYNpokUg3JW9x", body: "ich will schlafen amkkkkkgtrtrgtrgrtgtrk", userHandle: "userfinal", createdAt: "2021-02-05T00:51:04.998Z"} 
1: {screamId: "cWGTIceqH71nDIl2EMdN", body: "ich will schlafen amkkkkkk", userHandle: "userfinal", createdAt: "2021-02-05T00:49:57.555Z"} 
2: {screamId: "tqeMfYmtdw220uadZT7R", body: "ich will schlafen amk", userHandle: "test", createdAt: "2021-02-05T00:47:20.842Z"} 
3: {screamId: "m1BZnHSYj2ks94ZJBC4t", body: "ich will schlafen amk", userHandle: "test", createdAt: "2021-02-05T00:44:16.987Z"} 
4: {screamId: "csHMdyb1OaoIvZCx7gr1", body: "vsvsddsv", userHandle: "test", createdAt: "2021-02-04T23:27:47.885Z"} 
5: {screamId: "0UnVjTD67ByBnqF8Lyer", body: "Neeeewscream6", userHandle: "newdaniel5", createdAt: "2021-02-03T23:17:07.542Z"} 
6: {screamId: "AlGUIph01Hwaoy3axOzN", body: "Neeeewscream5", userHandle: "newdaniel5", createdAt: "2021-01-31T23:52:25.701Z"} 
7: {screamId: "07AKWthRJB1DzmiUxmbD", body: "Neeeewscream", userHandle: "newdaniel", createdAt: {…}} 
8: {screamId: "trnxtkiI7HWR9NTUmecr", body: "New screamzwei", userHandle: "new", createdAt: {…}} 
9: {screamId: "MobOBBFiHN3raEPEeW2i", body: "New scream", userHandle: "new", createdAt: {…}} 
10: {screamId: "dbLSJURg6n0uwIsSMr4I", body: "Second Scream", userHandle: "user", createdAt: {…}} 
11: {screamId: "Nz22dq42tjq5m1jBTTfy", body: "First scream , ahhhhhhh", userHandle: "user", createdAt: {…}} 
length: 12 
__proto__: Array(0)

जैसा कि आप देख सकते हैं, createdAt इंडेक्स 7 से शुरू होने वाली एक वस्तु है। इसलिए रिएक्ट शिकायत कर रहा है - यह वस्तुओं को प्रस्तुत नहीं कर सकता है। createdAt एक ऑब्जेक्ट है या नहीं, इसका पता लगाकर इसे ठीक से हैंडल करें या अपने बैकएंड कोड पर एक नज़र डालें और सुनिश्चित करें कि यह हमेशा एक स्ट्रिंग है।

1
Aitwar 10 फरवरी 2021, 01:51