如何在React中渲染来自API响应的数据？

如何初始化从API到变量的响应，以便我可以在我的render()函数中使用它？为什么component.setState不工作？错误：
遗漏的类型错误：未定义无法读取属性“用户名”（......）如何在React中渲染来自API响应的数据？

class Main extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     data: 23 
    }; 
} 

    componentDidMount() { 
var component = this; 


     fetch('https://fcctop100.herokuapp.com/api/fccusers/top/alltime') 
      .then(function(response) { 
       return response.json() 
      }).then(function(json) { 
       var data = json; 
       console.log(data[0]); 
       console.log(data[0].username); 
       component.setState({ 
        data: json 
       }) 
      }) 

    } 




    render() { 
    return (
     <div> 
     <h1>elo{this.state.data[0].username}</h1> 


     </div> 
    ); 
    } 
} 

const docs = document.getElementById('root'); 

ReactDOM.render(<Main/> , docs);

来源

2016-11-14 KAT

你应该有一个后卫声明/三元运营商在渲染方法，如果你打算使用一些数据，这将在稍后的时间到达。就像这样：var someData = this.state.data [0] .username || “”; –

@JustinHerter console.logs在获取日志中记录正确的数据 – KAT

的原因是，在第一次使这个“this.state.data [0] .username”不设置，直到响应从API调用返回。

像这样的事情在你的渲染方法应该工作：

render() { 
    var someData = this.state.data[0].username || ""; 
    return (
     <div> 
     <h1>elo{someData}</h1> 


     </div> 
    ); 
    }

来源

2016-11-14 17:14:41

当我把变量放在return语句中时，我收到了解析错误。 'SyntaxError：解析文件时意外的标记（39：6）' 我在我的gulpfile中使用browserify + babelify – KAT

@KAT抱歉，我错误地将声明移到了返回函数之外。 –

如何在React中渲染来自API响应的数据？

回答

相关问题