beginner at react.js - компонент рендеринга из состояния, которое обновляется позже

Question

Я пытаюсь проверить рендеринг компонента списка из объекта JSON, вызванного с помощью fetch, однако я подозреваю, что рендер вызывается до возвращения JSON, когда я получаю неопределенная ошибка. Обратите внимание, что отладочное предупреждение() получает значение, но рендер уже имеет ошибку при неопределенном значении. Как я могу справиться с этим? Есть ли способ вызвать функцию рендеринга после того, как данные были извлечены? ИЛИ мог ли я получить данные для рендеринга с помощью?? а затем обновляется, когда данные поступают? Обратите внимание, что мой if (! Object) doesn; t работает, когда вызывается как встроенная обертка - почему бы и нет - или более бесцеремонно, как бы я это сделал? Извините за вопросы начинающих - я подозреваю, что я хотел использовать инфраструктуру данных, чтобы отображать данные для реагирования на показ, но я хотел начать обучение с меньшими рамками и получить основы. Большое спасибо! - код:

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; 

Answer 1

ваша функция визуализации может быть что-то вроде этого:

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]?