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的初學者 - 從稍後更新狀態的渲染組件

回答

相關問題