javascript - API函数调用在反应组件中不起作用

Question

我从 API 获取数据的功能不起作用

import React, { Component } from 'react'

class Contact extends Component{

    constructor(){
        super()
        this.state = {
            data: []
        }
        this.fetchData = this.fetchData.bind(this)
    }

    fetchData(){
        let base_url = 'https://jsonplaceholder.typicode.com/photos/'
        fetch(base_url, {method:"GET"})
        .then(response => response.json())
        .then(json => {
            this.setState({
                data:json
            })
        })

        console.log(this.state.data)
    }

    render(){
        return(
            <div>
                <h1>Contact page{this.state.data.title}</h1>
            </div>
        )
    }
}

export default Contact

标签： javascriptreactjsreact-routerfetch-api

Answer 1

首先，您没有在fetchData任何地方调用该函数。componentDidMount在方法中调用它

其次，数据应该是一个数组，所以this.state.data.title会抛出错误

最后状态更新会反映在下一个渲染周期中，因此日志console.log(this.state.data)不会显示更新的数据

    class Contact extends React.Component{
    
        constructor(){
            super()
            this.state = {
                data: []
            }
            this.fetchData = this.fetchData.bind(this)
        }
    
        componentDidMount() {
           this.fetchData();
        }
    
        fetchData(){
            let base_url = 'https://jsonplaceholder.typicode.com/photos/'
            fetch(base_url, {method:"GET"})
            .then(response => response.json())
            .then(json => {
                this.setState({
                    data:json
                })
            })
    
        }
    
        render(){
            return(
                <div>
                    <h1>Contact page</h1>
                    {this.state.data.map(photo => <div>{photo.title}</div>)}
                </div>
            )
        }
    }
    
    ReactDOM.render(<Contact/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"/>