如何讓json數據反應呈現？

我想要做的就是抓住json數據將其作爲元素呈現。這裏是我有什麼，但this.images繼續拿出空（和未定義/ null的，如果我沒有在頂部設置如何讓json數據反應呈現？

import React, { Component } from 'react'; 
import axios from 'axios'; 

export default class Grid extends Component { 
    constructor(props) { 
    super(props); 
    this.images = []; 
    } 

    componentWillMount() { 
    axios.get('grid-config.json') 
    .then((res) => { 
     this.setImageArray(res.data); 
    }); 
    } 

    setImageArray(imageArray) { 
    let newArray = []; 
    for(let i = 0; i < imageArray.length; i++) { 
     newArray.push(imageArray[i]); 
    } 
    this.images = newArray; 
    } 


    render() { 
    const postData = this.props.images; 
    console.log(this.images); 
    return (
     <div> 
     hello 
     </div> 
    ); 
    } 
}

來源

2017-08-07 Jamie

您可以檢查瀏覽器控制檯，看看有沒有錯誤嗎？ –

沒有，我查了。在控制檯中唯一的是[] - >這是for console.log（this.images） – Jamie

你應該使用組件的狀態保存圖像數據。當該更新會導致組件渲染（陣營將調用其渲染功能。）

因此，例如，設置組件的狀態是這樣的：

setImageArray(imageArray) { 
    let newArray = []; 
    for(let i = 0; i < imageArray.length; i++) { 
     newArray.push(imageArray[i]); 
    } 
    this.setState({images: newArray }); 
    }

並初始化這一點，例如，在組件的構造函數：

constructor(props) { 
    super(props); 
    this.state = { images: [] }; 
    }

您訪問的數據呈現功能this.state.images。

{見題爲狀態組件部分在https://facebook.github.io/react/}

來源

2017-08-07 11:41:32

代碼中的小錯字「this.setState（{images：newArray}）'。 – vasekhlav

哎呀！對不起，謝謝！我修改了它。 –

在這種情況下，你只能用你的狀態，而不是類屬性操作。使用setState方法更新組件狀態。並從您的更新狀態呈現圖像。

export default class Grid extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { images: [] }; 
    } 

componentWillMount() { 
    axios.get('grid-config.json') 
    .then((res) => { 
    this.setImageArray(res.data); 
    }); 
} 

setImageArray(imageArray) { 
    let newArray = []; 
    for(let i = 0; i < imageArray.length; i++) { 
    newArray.push(imageArray[i]); 
    } 
    this.setState({ images: newArray }); 
} 


render() { 
    const postData = this.state.images; 
    console.log(postData); 
    return (
    <div> 
    hello 
    </div> 
); 
} 
}

試試此代碼來呈現圖像;

來源

2017-08-07 11:42:25

作出反應，如果狀態（在特殊情況下，除了像最初呈現或當forceUpdate是稱呼）改變組件將調用僅渲染。
您的axios調用是異步的，並且組件已通過執行時間呈現。
因此，當圖像是[]，並且再也不會調用渲染函數時。
要強制重新渲染，您必須將響應存儲在狀態中，因爲指向多個答案或使用forceUpdate（不推薦）。

編輯

class Application extends React.Component { 
    constructor(props) { 
    super(props) 
    this.myName = "Sachin" 
    } 

    componentDidMount() { 
    setTimeout(() => { 
     this.myName = 'Jamie'; 

     // If this is commented out, new value will not reflect in UI. 
     this.forceUpdate() 
    }) 
    } 
    render() { 
    return (
     <div> 
     <h1>Hello, {this.myName}</h1> 
     </div> 
    ); 
    } 
}

看到這個代碼筆鏈接：https://codepen.io/sach11/pen/ayJaXb

它非常類似於你的代碼，剛剛更換了愛可信的setTimeout調用。

在第16行，我有一個forceUpdate（），它強制重新渲染並反映this.myName的新值。否則，儘管值已更新，但它不會反映，因爲不會再次調用渲染。

來源

2017-08-07 11:52:31 Sachin

當我console.log（這個）在渲染功能，雖然它打印與它的圖像對象。這是爲什麼？ – Jamie

@Jamie正如我已經指出的那樣，只要在構造函數中定義了'images'，它就會被添加到類實例中。但是它的值只有在axios調用完成後纔會被填充。因此，'this'有一個名爲'image'的屬性，但是在第一次渲染時它的值將是'[]'。如果你可以再次觸發渲染函數，你會看到裏面的實際值。 – Sachin

@Jamie我用codepen鏈接更新了我的答案，檢查出來。 – Sachin

如何讓json數據反應呈現？

回答

相關問題