尝试获取 Postman API 并使用 map 函数显示数组的内容。它说数组未定义

Posted 2023-02-22

【中文标题】尝试获取 Postman API 并使用 map 函数显示数组的内容。它说数组未定义

【英文标题】：Trying to fetch a Postman API and displaying the contents of the array using map function. It says the array is undefined

【发布时间】：2021-01-27 01:10:36

【问题描述】：

API 获取一个包含对象数组的 json 对象。这个数组被取出来，作为props（props.users）传递给下面的组件。

import React,  Component  from 'react';

import UserCard from '../components/UserCard';

export class Userscreen extends Component 

    constructor(props) 
        super(props);
        this.state = users: [];
    

    componentWillMount() 
        const people =  this.props.users;
        this.setState(users: people);
    

    render() 

        let UserList = this.state.users.map(user => 
            <UserCard name=user.firstName+' '+user.lastName id=user.id email=user.email dob=user.dob />
        );
        return (
            <div>
                UserList                
            </div>
        )
    


export default Userscreen

【参考方案1】：

不要将 props 复制到 state。直接使用道具即可：

export class Userscreen extends Component 
    render() 
        let UserList = this.props.users.map(user => 
        // −−−−−−−−−−−−−−−−−^^^^^
            <UserCard name=user.firstName+' '+user.lastName id=user.id email=user.email dob=user.dob />
        );
        return (
            <div>
                UserList                
            </div>
        );
    

道具基本上是父母控制的状态。通过将它们复制到状态，您将捕获 first props.users 调用您的组件，然后忽略父级之后所做的任何更新。这就是列表为空的原因：据推测，您的父组件在 ajax 调用运行时开始使用空的用户列表创建 Userscreen，然后在 ajax 调用完成时更新它。

---

旁注：由于该组件现在是纯组件，您可以考虑将其转换为无状态功能组件：

export function Userscreen(props) 
    let UserList = props.users.map(user => 
    // −−−−−−−−−−−−^^^^^^^^^^^
        <UserCard name=user.firstName+' '+user.lastName id=user.id email=user.email dob=user.dob />
    );
    return (
        <div>
            UserList                
        </div>
    );

或者解构：

export function Userscreen(users) 
    let UserList = users.map((firstName, lastName, id, email, dob) => 
        <UserCard name=firstName + ' ' + lastName id=id email=email dob=dob />
    );
    return (
        <div>
            UserList                
        </div>
    );

【讨论】：

我试过这个解决方案，仍然是同样的错误。如果我尝试在通过 console.log(props.users) 映射之前记录 users.props;它可以很好地打印对象。只是映射有问题。

@Dungeonmaster - 这个答案纠正了问题中显示的代码的问题，并且如果父级在拥有用户列表时重新渲染，则绝对有效。如果它不起作用，则表明 A）您没有像上面那样实现它（对不起 :-)），或者 B）父组件存在单独的问题。请仔细检查您是否正确实现了上述内容，如果是父组件问题，请发布有关父组件的新问题。在该问题中，请包含一个 runnable 示例； here's how to do one.