Question

我想要做的是抓住json数据将其渲染为元素。这就是我所拥有的，但是this.images仍然是空的（如果我没有将它设置在顶部，则为undefined / 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

您应该使用组件的状态来保存图像数据;更新时，它将导致组件呈现（React将调用其呈现函数。）

因此，例如，将组件的状态设置为：

    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

只有在状态发生变化时，React组件才会调用render （在初始渲染或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替换了axios调用。

在第16行，我有一个forceUpdate（），它强制重新渲染并反映this.myName的新值。否则，尽管值已更新，但它不会反映，因为渲染不会再次调用。

如何在反应渲染中获取json数据？

3 个答案: