反应取返回不可用__proto__ obejcts

Question

我试图去的special_abilities阵列在下面的API端点：http://www.dnd5eapi.co/api/monsters/1

这里是我的容器组件：

import React, { Component } from 'react' 
import { Link } from 'react-router'; 
import MonsterSpecialAbilities from '../components/MonsterSpecialAbilities' 

class MonstersContainer extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     monster: {}, 
     number: Math.floor((Math.random())*325) 
    } 
    this.handleRandomClick = this.handleRandomClick.bind(this) 
    } 

    componentDidMount() { 
    fetch(`http://www.dnd5eapi.co/api/monsters/${this.state.number}`) 
     .then(response => response.json()) 
     .then(responseData => { 
     this.setState({ monster: responseData }) 
     }) 
    } 

    render() { 
    let spec_abilities; 
    spec_abilities = this.state.monster.special_abilities.map((ab) => { 
     return(
     <MonsterSpecialAbilities 
      desc={ab.desc} 
     /> 
    ) 
    }) 
    return(
     <div> 
     {this.state.monster.name} 
     {spec_abilities} 
     </div> 
    ) 
    } 
} 

export default MonstersContainer 

眼下.map功能打破我的组件，我得到控制台错误：Uncaught TypeError: this.state.monster.special_abilities.map is not a function。我试图访问this.state.monster.special_abilities[0]访问数组，但这返回为null，导致我相信它是一个无效的数组。

我试图创建一个州名monster_special_ability并手动通过以下方法设置数组：

componentDidMount() { 
    fetch(`http://www.dnd5eapi.co/api/monsters/${this.state.number}`) 
     .then(response => response.json()) 
     .then(responseData => { 
     this.setState({ monster: responseData }) 
     this.setState({ monster_special_abilities: responseData.special_abilities }) 
     }) 
    } 

我试图把调试器在setState功能，并键入responseData.special_abilities到控制台返回数组我想要的，但状态设置后，似乎阵列不可用（它变成原型：对象）

任何帮助，将不胜感激！我很乐意澄清其他事情。

Answer 1

使用提取反应组件时的一种常见做法是使用加载状态。最初将其设置为false，一旦解析完成，将其设置为true。如果加载状态为true，则只显示组件。因此，最终的代码看起来应该像下面这样：

class MonstersContainer extends Component { 
 
    constructor(props) { 
 
    super(props) 
 
    this.state = { 
 
     isDataLoaded: false, 
 
     monster: {}, 
 
     number: Math.floor((Math.random())*325) 
 
    } 
 
    this.handleRandomClick = this.handleRandomClick.bind(this) 
 
    } 
 

 
    componentDidMount() { 
 
    fetch(`http://www.dnd5eapi.co/api/monsters/${this.state.number}`) 
 
     .then(response => response.json()) 
 
     .then(responseData => { 
 
     this.setState({ 
 
      isDataLoaded: true, 
 
      monster: responseData 
 
     }) 
 
     }).catch(e => console.log(e)); 
 
    } 
 

 
    render() { 
 
    const { isDataLoaded, monster } = this.state; 
 
    const monsterProps = { isDataLoaded, monster }; 
 
    return <Monsters {...monsterProps} /> 
 
    } 
 
} 
 

 
function MonsterSpecialAbilities(desc) { 
 
    return <div>desc</div> 
 
} 
 

 
function Monsters(props) { 
 
    const {isDataLoaded, monster} = props; 
 
    let spec_abilities; 
 
    
 
    if (isDataLoaded && monster.special_abilities) { 
 
     spec_abilities = monster.special_abilities.map((ab) => 
 
     <MonsterSpecialAbilities 
 
      desc={ab.desc} 
 
     /> 
 
    );  
 
    } 
 

 
    return (isDataLoaded && spec_abilities && monster.name) ? (
 
     <div> 
 
     {monster.name} 
 
     {spec_abilities} 
 
     </div> 
 
    ): <div>loading monster data...</div>; 
 
    
 
}

看到它住在jsbin。

请注意，提取可能会失败，您还需要对此进行一些操作。您可以添加另一个名为errorMessage的状态，显示错误消息。在你的情况下，确保你的主机运行在http和NOT https上，因为当使用https获取时，提取url不起作用。

Answer 2

改变你的怪物null在初始状态，并渲染到：

render() { 
    if (!this.state.monster) { 
     return <div> Loading monster...</div>; 
    } 

    const spec_abilities = this.state.monster.special_abilities.map(ab => 
     <MonsterSpecialAbilities desc={ab.desc} /> 
    ) 

    return (
     <div> 
     {this.state.monster.name} 
     {spec_abilities} 
     </div> 
    ) 
    } 

如果您需要monster是一个对象，你可以检查是否已经有special_abilities集，insted的的monster