reactjs - 通过 API 调用反应循环

Question

我正在使用 react 从 API 获取数据并将其显示在引导容器中。我正在尝试实现反应映射以遍历数据库中的每个条目。

import React from 'react';
import "./Home.css";
import Icon from "./../Images/icon.png";
import Popup from "./Popup";

export default class GetFullName extends React.Component {

    constructor(props) {
        super(props);
        this.state = { showPopup: false };
    }

    togglePopup() {
        this.setState({
            showPopup: !this.state.showPopup
        });
    }

    state = {
        firstName: null,
        lastName: null,
        fullName: null,
        jobRole: null,
        about: null,

    }

    async componentDidMount() {
        const url = "https://localhost:44362/api/peopleprofiles";
        const response = await fetch(url);
        const data = await response.json();
        this.setState({ firstName: data[0].firstName })
        this.setState({ lastName: data[0].lastName })
        this.setState({ fullName: this.state.firstName + " " + this.state.lastName })
        this.setState({ jobRole: data[0].roleType.jobRole })
        this.setState({ about: data[0].about })
        this.setState({ image: window.btoa(data[0].iconNavigation.image) })
        this.setState({ image: "data:image/jpeg;charset=utf-8;base64, " + window.btoa(data[0].iconNavigation.image) + "" })
        console.log(data)
    }


    render() {
        return (
                <div className="container PeopleProfile">
                    <div className="row flex-grow">
                        <div className="col-2">
                        <img src={this.state.image} className="Icon" alt="ProfileIcon" />
                        //<img src={Icon} className="Icon" alt="ProfileIcon" />
                        </div>  
                        <div className="col-10">
                            <div className="row PeopleProfile">
                                <p id="ppName"><div>{this.state.fullName}</div></p>
                            </div>
                            <div className="row ppjobTitle">
                                <p id="ppjobTitle"><div>{this.state.jobRole}</div></p>
                            </div>
                            <div className="row PeopleProfile">
                            <p id="ppDescription"><div>{this.state.about}</div></p>
                            </div>
                                <div className="row PeopleProfile">
                                    <div className="ppButton">

                                <input type="submit" onClick={this.togglePopup.bind(this)} value="Full profile" id="PeopleProfileBTN" class="align-self-end btn btn-lg btn-block"></input>
                                    </div>
                                    <div>
                                        {this.state.showPopup ?
                                        <Popup
                                            text='Click "Close Button" to hide popup'
                                            closePopup={this.togglePopup.bind(this)}
                                            />
                                            : null
                                         }
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
        );
    }

}

这是我当前的代码。我曾尝试使用反应地图，但似乎无法使其正常工作。有谁知道我如何正确地将反应图实施到这个项目中或更好的方法来解决这个问题？

标签： reactjsapiloopsfetch

Answer 1

将在构造函数的状态对象内声明的状态值移出构造函数。

    state = {
        firstName: null,
        lastName: null,
        fullName: null,
        jobRole: null,
        about: null,

    }

进入构造函数

    constructor(props) {
        super(props);
        this.state = {
            showPopup: false,
            firstName: null,
            lastName: null,
            fullName: null,
            jobRole: null,
            about: null,
        };
    }

setState 是一个异步函数。尝试进行一次更新。安装了这个

 this.setState({ firstName: data[0].firstName })
        this.setState({ lastName: data[0].lastName })
        this.setState({ fullName: this.state.firstName + " " + this.state.lastName })
        this.setState({ jobRole: data[0].roleType.jobRole })
        this.setState({ about: data[0].about })
        this.setState({ image: window.btoa(data[0].iconNavigation.image) })
        this.setState({ image: "data:image/jpeg;charset=utf-8;base64, " + window.btoa(data[0].iconNavigation.image) + "" })

做这个

this.setState({
            firstName: data[0].firstName,
            lastName: data[0].lastName,
            fullName: data[0].firstName + " " + data[0].lastName,
            jobRole: data[0].roleType.jobRole,
            about: data[0].about,
            image: window.btoa(data[0].iconNavigation.image),
            image: "data:image/jpeg;charset=utf-8;base64, " + window.btoa(data[0].iconNavigation.image) + ""
        });

该状态有 2 个图像属性，删除其中一个。