組件狀態變量為img src url

Question

我是React的新手。 我正在嘗試使用組件狀態變量設置圖像的src屬性。 但是，當我運行代碼時，我看不到組件被渲染。 但是，如果我顯式定義圖像的src url，則它可以工作。

我的代碼如下。 我也在使用React Carbon組件和React網格布局。

import 'carbon-components/scss/globals/scss/styles.scss';
import GridLayout from 'react-grid-layout';

import React, { Component } from 'react';
import { ClickableTile,Link } from 'carbon-components-react';


class ct extends React.Component {

 constructor() {
  super()
  this.state ={
   arr:[]
  }
 }

 componentWillMount(){

   let tilesData = []

   fetch("https://xyz/api/abc")
   .then((results)=>{

      return results.json();

   }).then((data)=>{

        let details = {
            imageUrl:data.images["image"]
        }

        tilesData.push(details)
        this.setState({arr : tilesData})

   })



   render() {

   var layout = [
    {i: 'a', x: 0, y: 0, w: 2, h: 2}
   ];

   return (
   <GridLayout className="layout" layout={layout} rowHeight={30} width={50}>

   <ClickableTile key="a">

    <div>

    // issue here ---------VVVVV
    <img src={this.state.arr[0].imageUrl}/>

    </div>
    </ClickableTile>
   </GridLayout>
  );
  }
 }

可能是什么問題？

更新-我解決了這個問題

FIX- this.state ={ arr:[{}] } }

Answer 1

您的fetch操作是異步的。 您正在更改狀態，而無需等待狀態完成。 您需要在fetch成功回調中設置狀態，以使setstate生效。 因此，您的狀態為空，因為狀態從未更改。

嘗試這個：

fetch("https://xyz/api/abc")
   .then((results)=>{

      return results.json();

   }).then((data)=>{

        let details = {
            imageUrl:data.images["image"]
        }

        tilesData.push(details)
        this.setState({arr : tilesData}) //call setState in the fetch callback
   })

Answer 2

我修好了它

this.state =
    {
        arr:[{}]
    }
}