'Updating react component state after API call. 2022
I am trying to create a react component that receives one object initially. this object has all the necessary data for me to make an API call and query a DB collection. I have semi acheived what I am needing but it is messy includes some code from outdated tutorials. This should be easy I would think with react.
QuestionComponent.js
class QuestionComponent extends React.Component{
constructState(props){
var ret = []
return new Promise(resolve => {
console.log(props.question.public_token)
window.API.user_profile(props.question.public_token).then(user => {
ret['question'] = props.question
ret['public_token'] = props.question.public_token
ret['title'] = props.question.title
ret['author'] = user.username
console.log(props.question)
var z = 0
props.question.tags.forEach(tag => {
z++
ret['tags'] = [ret['tags'], <TagComponent key={tag+z} text={tag}></TagComponent>]
});
resolve(ret)
})
})
}
constructor(props){
super(props);
console.log(props)
this.state = {question:props.question}
this.constructState(props).then(res => {
console.log(res)
this.state = res
})
//var isQuestion
//if(props.isQuestion|| props.isQuestion != undefined){
// this.state = {id: props.question.id, title: props.question.title, tags:props.question.tags, author:props.question.author}
//}else{
// console.log('else')
// this.state = {id: props.question.id, title: 'test', tags:['test','test'], author:'test author'}
//}
}
componentDidMount(){
console.log('mount')
this.constructState(this.state.question).then(res => {
console.log(res)
this.state = res
})
}
render(){
return (...)
}
};
export default QuestionComponent;
this is where I am at right now. you can see the console.log(res) in the constructor.construcState() when i run the code it seems to return Exactly what i want but I think its being evaluated afterwards in the console or I cant set the state properly. I'm still somewhat new to React. could someone show me what i'm doing wrong?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
