ReactJSで未定義のプロパティ 'map'を読み取ることができません

Question

ReactJS Appに問題があり、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()を実行しようとすると、定義されていません。だから仕事＃1はあなたのfetch()がなぜ未定義に戻っているのかを突き止め、それを修正することです。定義されていない結果やその他のエラーが発生した場合や、状態を適切に設定する場合は、いくつかの処理を組み込むことをお勧めします。

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

このような条件文は「三​​元」と呼ばれ、それが中に埋め込むことができるので非常に便利です。また、私はこのように、mapにそれをしようとする前に、予想される配列がundefinedではないことを確認する傾向がありますJSXを "if/else"文として使用します。それは形式が(condition) ? (expression if true) : (expression if false)です。例：

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