在渲染方法中无法识别 React js 状态对象

Question

I'm a beginner in React, in the componentDidMount, I'm retrieving a response object from Axios then I'm setting it to the state object, even though it is accessible from outside functions it wouldn't work inside the render method, I don't know how to bind the state to get access to render()

error that pops: Unhandled Rejection (TypeError): Cannot read property 'imageref' of undefined

export default class Product extends Component {
  constructor(props) {
    super(props);
    const id = this.state.comicId;
    console.log("This is printed from the constructor " + id);
  }

  state = {
    comicId: "",
    issueObjectState: "",
  };
render(){
<img
 src={this.state.issueObjectState.imageref}
 alt="Image Description"
 className="mx-auto img-fluid"/>
}
 
async componentDidMount() {
    let state = [];
    const id = this.props.location;
    let comicId = id.data;
    this.setState({ comicId: this.props.comicId });

    let issueData = await axios.get(`http://localhost:5000/comic/${comicId}`);
    let comicData = issueData.data;

    if (comicData) {
      this.setState({ issueObjectState: comicData });
      console.log(this.state.issueObjectState);
    }
  }
}

help is much appreciated

Answer 1

I see that you have many errors on your code, starting with declaring the state outside the constructor method, so you should do this first :

constructor(props) {
super(props);
this.state = {
comicId: "",
issueObjectState: "",
};
}

then lifecycle methodes can't be used with the async keyword before it, your async function must be inside the lifecycle method.

Answer 2

What I believe here is you have to shift your this.state object to the constructor.

export default class Product extends Component {
 constructor(props) {
  super(props);
  state = {
    comicId: "",
    issueObjectState: "",
  };
  const id = this.state.comicId;
  console.log("This is printed from the constructor " + id);

 }
}

Answer 3

You are trying to access the object this.state.issueObjectState.imageref before you assign an object to issueObjectState . At the time of the error the issueObjectState is simply ""

render is called before componentDidMount. What you could use instead is componentWillMount to assign an object to issueObjectState . But it would be best practice to avoid componentWillMount alltogether and maybe in your case just assign it an object with a value of null

Answer 4

Several flaws in your component.

1. You are accessing state inside the render method before the data is fetched and stored to the state. Axios fetch the data asynchronously and it won't be available inside the initial call of render method. Better add a check before accessing state data.

2. You are not returning any element or component from the render method which is incorrect.

Refactoring the render part as bellow should work:

render(){
 return (
 this.state.issueObjectState == '' ? null : 
 <img
  src={this.state.issueObjectState.imageref}
  alt="Image Description"
  className="mx-auto img-fluid"/>
 )
}

Answer 5

Use it like :

   <img src={this.state.issueObjectState!==""?
    this.state.issueObjectState.imageref : this.state.issueObjectState }
    alt="Image Description" className="mx-auto img-fluid"/>

Answer 6

async componentDidMount() {
    let state = [];
    const id = this.props.location;
    let comicId = id.data;
    this.setState({ comicId: this.props.comicId });

    let issueData = await axios.get(`http://localhost:5000/comic/${comicId}`);
    let comicData = issueData.data;

    if (comicData) {
      this.setState({ issueObjectState: comicData });
      console.log(this.state.issueObjectState);
    }
  }
}

should be:

componentDidMount() {
    const  {comicId} = this.state

    axios.get(`http://localhost:5000/comic/${comicId}`).then((issueData)=> {
      this.setState({ issueObjectState: issueData.data ? issueData.data : null });
      //console.log(this.state.issueObjectState); <-- does not work this.setState is like async
        }
});

      }
    }

and:

constructor(props) {
  super(props);
  this.state = {
   comicId: props.location.data,
   issueObjectState: "",
};
}

render:

render(){
 return (
  <div>
    {this.state.issueObjectState &&
    <img
      src={this.state.issueObjectState.imageref}
      alt="Image Description"
      className="mx-auto img-fluid"/>
    }
  </div>
 )
}

or:

render(){
 if (this.state.issueObjectState) 
 return (
    <img
      src={this.state.issueObjectState.imageref}
      alt="Image Description"
      className="mx-auto img-fluid"/>
 )
 return <Loading />  //<--- a compenent that show an animated loading image
}