javascript - 组件状态变量作为 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>
  );
  }
 }

可能是什么问题？

更新 - 我解决了问题

修复 - this.state ={
到达:[{}]
}
}

Answer 1

您的fetch操作是异步的。您无需等待状态完成即可更改状态。您需要在 fetch success 回调中设置状态，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
   })