通过 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>
        );
    }

}

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

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个image属性，删除其中一个。