Question

因此，我正在尝试从API加载数据，但在此过程中遇到了很多问题。我读了几乎所有内容，但无济于事。如果有更好的方法来构造我的代码，请发表评论。欢迎所有帮助。

import React, { componentDidMount, Component } from 'react';

class Students extends Component {
    constructor(props) {
        super(props);
        this.state = {
            student: []
        }
    }

    componentDidMount() {
        fetch(`https://www.hatchways.io/api/assessment/students`)
            .then(res => res.json())
            .then(data => this.setState({ student: data }));
    }

    render() {
        const students = this.state.student.map(pupil => (
            <div key={pupil.id}>
                <p>{pupil.firstName + ` ` + pupil.lastName}</p>
            </div>
        ))
        return (
            <>
                <section className="hero is-fullheight">
                    <div className="hero-body">
                        <div className="container">
                            {students}
                        </div>
                    </div>
                </section>
            </>
        )
    }
}

export default Students;

我想映射数组并从api加载所有用户

Answer 1

您获取的数据是一个对象，而不是数组。您可以从该对象设置学生。

componentDidMount() {
    fetch(`https://www.hatchways.io/api/assessment/students`)
     .then(res => res.json())
     .then(data => this.setState({ student: data.students }));
}

Answer 2

避免使用Class组件，它会产生过多的开销，无法做出反应来处理。使用功能组件并使用挂钩，

componentDidMount将更改为

Useeffect(()=>{
 fetch(`https://www.hatchways.io/api/assessment/students`)
            .then(res => res.json())
            .then(data => this.setState({ student: data.students }));
},[])

如果您正在使用类组件，请尝试更改名称 UNSAFE_componentWillMount()

TypeError：this.state.student.map不是函数

2 个答案: