如何让json数据反应呈现？

Question

我想要做的就是抓住json数据将其作为元素呈现。这里是我有什么，但this.images继续拿出空（和未定义/ null的，如果我没有在顶部设置

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> 
    ); 
    } 
} 

Answer 1

你应该使用组件的状态保存图像数据。当该更新会导致组件渲染（阵营将调用其渲染功能。）

因此，例如，设置组件的状态是这样的：

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/}

Answer 2

在这种情况下，你只能用你的状态，而不是类属性操作。使用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> 
); 
} 
} 

试试此代码来呈现图像;

Answer 3

1. 作出反应，如果状态（在特殊情况下，除了像最初呈现或当forceUpdate是 称呼）改变 组件将调用仅渲染。

2. 您的axios调用是异步的，并且组件已通过 执行时间呈现。

3. 因此，当图像是[]，并且再也不会调用渲染函数时。

4. 要强制重新渲染，您必须将响应存储在状态中，因为 指向多个答案或使用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的新值。否则，尽管值已更新，但它不会反映，因为不会再次调用渲染。