हाय मैं जेसन प्रतिक्रिया प्रस्तुत करने का प्रयास करते समय कुछ एपीआई कॉल करने के लिए रेडक्स का उपयोग कर रहा हूं। क्या हो रहा है यह जानने के लिए मैं प्रतिक्रियाओं को लॉग करने का प्रयास कर रहा हूं लेकिन वह भी काम नहीं कर रहा है?

dashaction.js

export function updateyield(total){
    return{
        type:"UPDATE_YIELD",
        total: total
    }
}

export function loadyield(){
    return(dispatch)=>{
        return axios.get("localhost:5000/getallyield").then ((response) => {
            dispatch(updateyield(response.data));
            let res = response.data;
            console.log(res.data)
        })
    }
}

इसे DashContent . में रेंडर किया गया है

class DashContent extends Component {

    render () {
        return(

        <div>
        {this.props.loadyield()}
        <h3> Yield</h3>
        <ul>{this.props.total}</ul>
        </div>
        );
    }

}
function mapStatetoProps(state) {
    return state
    };

export default connect(mapStatetoProps, {loadyield}) (DashContent);

यहाँ पूर्ण त्रुटि संदेश है:

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    in div (at dashboardcontainer.js:12)
    in DashContent (created by ConnectFunction)
    in ConnectFunction (at Dashboard.js:15)
    in div (at Dashboard.js:14)
    in Dashboard (created by Context.Consumer)
    in Route (at App.js:16)
    in Switch (at App.js:15)
    in div (at App.js:13)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:12)
    in App (at src/index.js:13)
    in Provider (at src/index.js:13)

क्या यह मेरे अनुरोध में त्रुटि है? या मैं कैसे प्रतिक्रिया दे रहा हूँ? ऐसा लगता है कि मेरे एपीआई लॉग से कुछ भी प्राप्त नहीं हुआ है? क्षमा करें अगर मैंने पर्याप्त जानकारी प्रदान नहीं की है

0
Charlie 23 जिंदा 2020, 00:12

1 उत्तर

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

यहाँ त्रुटि यह है कि आप लौटे JSX टैग में loadyield() फ़ंक्शन को कॉल कर रहे हैं

घटक माउंट होने के बाद आप डेटा लोड कर सकते हैं। आप एक componentDidMount() जीवनचक्र विधि जोड़कर ऐसा कर सकते हैं। तो आपका DashContent कुछ इस तरह दिखेगा।

class DashContent extends Component {
    componentDidMount(){
        this.props.loadyield();
    }
    render () {
        return(
        <div>
            <h3> Yield</h3>
            <ul>{this.props.total}</ul>
        </div>
        );
    }

}

function mapStatetoProps(state) {
    return state
};

export default connect(mapStatetoProps, {loadyield}) (DashContent);

वैकल्पिक रूप से आप componentWillRecieveProps का उपयोग कर सकते हैं (यह जीवनचक्र पद्धति बहिष्कृत कर दी गई है। इसे यह) या बस एक ताज़ा करें बटन है जो उपज को अद्यतन करने के लिए कार्रवाई भेजता है।

3
sudo97 27 जिंदा 2020, 11:23