无法读取ReactJS中未定义的属性“地图”

Question

我的ReactJS应用程序从api获取数据时遇到问题。我仍然有一个错误：'无法读取未定义的属性'地图'，我不知道为什么会发生。

我的代码： UsersList.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import fetch from 'isomorphic-fetch'; 
import { Card, Container, Icon } from 'semantic-ui-react' 
import User from './User' 

class ProfilesList extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     users: [], 
     fetched: false, 
     loading: false, 
    }; 
    } 
    componentWillMount(){ 
    this.setState({ 
     loading : true 
    }); 
    fetch('http://58be98154389c312007f403f.mockapi.io/users/users').then(res => res.json()) 
    .then(res =>{ 
     this.setState({ 
     users : res.results, 
     loading : true, 
     fetched : true 
     }); 
    }); 
    } 
    render() { 
    const {fetched, loading, users} = this.state; 
    let content; 
    if(fetched){ 
     content = <div>{this.state.users.map((user,index) => 
     <User key={user.username} id={index+1} user={user}/>)}</div>; 
    } 
    else if(loading && !fetched){ 
     content = <p> Loading ...</p>; 
    } 
    else{ 
     content = (<div></div>); 
    } 
    return (
     <div> 
     {content} 
     </div> 
    ); 
    } 
} 

export default ProfilesList; 

user.js的

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Card, Container, Icon } from 'semantic-ui-react' 


class User extends React.Component { 
    render() { 
    const {user, id} = this.props; 
    return (
     <Card 
     image='http://semantic-ui.com/images/avatar/large/elliot.jpg' 
     header={user.username} 
     meta='Friend' 
     description='Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.' 
     extra={(
      <a> 
      <Icon name='user' /> 
      16 Friends 
      </a> 
     )} 
     /> 
    ); 
    } 
} 

export default User; 

感谢您的帮助！

Answer 1

当您尝试在render函数中尝试执行this.state.users.map()时，您的state.users未定义。因此，任务＃1是找出为什么你的fetch()返回undefined并解决这个问题。当你得到未定义的结果或其他错误并适当地设置你的状态时，建立一些处理情况是一个好主意。此外，我倾向于检查预期的数组不undefined之前，我尝试map，就像这样：

{ 
    expectedArray 
    ? 
     expectedArray.map(someMappingFunction) 
    : 
     <div>expectedArray was 'undefined' or otherwise 'falsy'</div> 
} 

这样的条件语句被称为“三元”，是非常有用的，因为它可以嵌入JSX作为“if/else”语句。它有表格(condition) ? (expression if true) : (expression if false)。例如：

var foo = 7; 
var bar = (foo % 2 == 0) ? "Even" : "Odd"; 
console.log(bar); // "Odd"