react.js的初学者 - 从稍后更新状态的渲染组件

我想测试渲染列表组件从一个JSON对象调用与提取，但是我怀疑渲染是在JSON返回之前调用，因为我得到一个未定义的错误。注意debug alert（）获取值，但渲染在undefined时已经出错。我该如何处理？数据获取后有没有办法调用渲染函数？或者我可以如何获得数据以'？'呈现然后在数据到达时更新？请注意我的if（！object）doesn; t作为内联包装函数调用 - 为什么不 - 或者更不重要的是如何执行此操作？对于begginer问题抱歉 - 我怀疑我打算使用数据框架来为显示反应提供数据，但我想用较少的框架开始学习并获得基础知识。非常感谢！ - 代码：react.js的初学者 - 从稍后更新状态的渲染组件

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
class ItemLister extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { items: [] }; 
} 
componentDidMount() { 
    let url = "http://localhost:8888"; 
    let iterator = fetch(url, {method: 'GET'}); 
    iterator 
    .then(response => { 
    //console.log('sss', response) 
     return response.json(); 
    }) 
    .then(post => { 
     //console.log(post) 
     this.state.items = post; 
     alert(this.state.items.users[3].firstname); 
    }); 
} 
output(object){ 
    if (!object){ 
     return '?'; 
    }else{ 
     return object; 
    } 
} 
render() {   
    return(
     <div> 
      <div>Items:</div> 
      <div>{this.output(this.state.items.users[3].firstname)}</div> 
     </div> 
    ); 
} 
}    
export default ItemLister;

来源

2017-02-20 Andrew

是的，这是React或其他此类框架的基本内容。当没有数据和状态发生变化时，您将呈现一个占位符/加载/无论什么时候组件将再次呈现并且您将呈现实际数据。它不工作的原因是因为你试图访问'this.state.items.users ...'并且它不存在，所以它甚至不能访问该函数。 –

渲染功能可能是这样的：

render() { const username = (this.state.items === []) ? placeholder : this.output(this.state.items.users[3].firstname; return( <div> <div>Items:</div> <div>{username}</div> </div> ); }

基本上，您呈现一个占位符组件，直到数据到达，因为你取数据是异步和componentDidMount ，所以你的渲染将在你有数据之前发生。

虽然您可能想重新考虑如何构造该组件，但您为何要访问特定用户[3]？

来源

2017-02-20 17:30:43 Conan

非常感谢柯南。我现在只是做这个测试。我真的需要将完整的JSON对象存储在状态中，然后使用多个字段呈现列表。您的代码示例是否可以存储所有项目，然后使用.map输出许多

{first_name} blah blah {favourite_food}

。我现在尝试你的代码。再次感谢，非常感谢，如果你coudl告诉我如何扩展到项目JSON的几个项目列表？ – Andrew

我还没有能够得到这个工作呢。你能解释占位符是如何工作的吗？我需要定义它吗？别处。输出是关键词吗？对不起，我对此很新，还有一些新的/ JSX语法即？和===。非常感谢 – Andrew

将此行更改为： const placeholder =“等待项目...”; const username =（this.state.items === []）？占位符：this.output（this.state.items.users [3] .firstname; – Mateusz

react.js的初学者 - 从稍后更新状态的渲染组件

回答

相关问题