Question

我是React的新手。我试图使用组件状态变量设置图像的src属性。但是当我运行代码时，我看不到组件被渲染。但是，如果我明确定义图像的src网址，则可以正常工作。

我的代码如下。我也在使用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:[{}]
    }
}

组件状态变量为img src url

2 个答案: