成功获取后反应不显示数据 [英] React not displaying data after successful fetch

问题描述

我是React的新手，它试图弄清楚我当前获取和显示数据到页面的方法出了什么问题.

I'm new to React and trying to figure out what is going wrong with my current method of fetching and displaying data to a page.

我通过Postman运行了后端请求，它似乎可以正常工作，但是出于某种原因，数据没有映射到我的状态列表"数组.我已经在控制台上记录了res，可以看到数据正在传递到此组件，但是状态列表"映射出了点问题.任何帮助将不胜感激.

I ran the backend request through Postman and it appears to work but for what ever reason that data isn't mapping to my state 'list' array. I've console logged the res and can see that data is being passed to this component but something is going wrong with the state 'list' mapping. Any help would be appreciated.

class Software extends Component {

    constructor(props){
        super(props)
        this.state = {
            list : []
        }
    }

    //when componenet is successfully called pull appropriate data
    componentDidMount(){
        this.getSoftware();
    }


    //set pulled data to the form of the list
    S_List = () => {
        return this.state.list.map((curr, index) => {
                return < itemlist list = {curr} key = {index} />
        })

    }


    //pull data from the DB
    getSoftware(){

        fetch(`http://localhost:5000/routes/software`) //need to complete queries 
            .then(res => res.json())
            .then(res => console.log(res)) //
            .then(list => this.setState({list}))
            .catch(err => console.log(err))

        //console.log(this.state);
    }

    

    render() {
        //console.log(this.state);
        return(
            <Fragment>
                <Link to="/">
                    <Navbar bg="dark" variant="dark">
                        <Navbar.Brand href="#home">Ninventory</Navbar.Brand>
                    </Navbar>
                </Link>
                <Jumbotron>
                    <h1>Software</h1>
                    <p>
                        This page holds software products like the latest games in the Nintendo library
                    </p>
                </Jumbotron>
                <Container bg = "#f72525">
                    <Table style = {{color:"#f72525"}} striped hover >
                        <p>contains place holders for now</p>
                        <br></br>

                        <thead>
                            <td>Product</td>
                            <td>Price</td>
                            <td>Release Date</td>
                        </thead>
                        <tbody>
                            {this.S_List()}
                        </tbody>
                    </Table>
                </Container>
                
            </Fragment> 

        )
    }


}

const itemlist = item => (
    <tr>
        <td>{item.list.s_prodName}</td>
        <td>{item.list.s_price}</td>
        <td>{item.list.s_releasedate}</td>
    </tr>
)

推荐答案

将 .then(res => console.log(res))更改为 .then(res =>{console.log(res); return res;} .如果您发布的代码正确，则console.log正在吞噬响应对象，然后将undefined传递给下一个.then语句.

Change .then(res => console.log(res)) to .then(res => { console.log(res); return res; }. If the code you posted is accurate your console.log is eating your response object and then passing undefined to the next .then statement.

这篇关于成功获取后反应不显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！