CODEWITHSUNDEEP
javascriptjsonreactjs
Roman Nozhenko
Roman Nozhenko

Reputation: 628

how save to state and save to local variable result from fetch api

I have a function that returns json:

const mapDispatchToProps = dispatch => {
  return {
    articleDetail: (id) => {
        return dispatch(articles.articleDetail(id));
    }
  }
};

I get the result of the call here:

class ArticleDetail extends Component {

constructor(props) {
    super(props);
    this.state = {
        articleId: props.match.params.id,
        asd: "",
        art:{}
    };
}

componentWillMount() {
    this.props.articleDetail(this.state.articleId).then((res) => {
        console.log(res.article);
        this.setState({art:res.article})
    });
    this.setState({asd: "asda"})
}

console.log(res.article) return me: {id: 1, author: {…}, headline: "First test article", description: "sadasdsads", img_name: "D.png", …}

but I can't write this result in state, just outside the function, as I did with asd.

I would appreciate it if you would help me, maybe there is some way to write the result of this.props.articleDetail () in state.

I also wanted to ask if I could write the result of calling this function into a variable, and the function returns promise

And also, is it possible to set some variable over this function and record what my console.log "returns" to my external variable.

Thank you so much for your time.

Upvotes: 0

Views: 368

Answers (1)

Yoav
Yoav

Reputation: 3386

how did you check if the state changed?
In order to properly check if the state has been updated apply a callback to the setState function like this (remember that setState is async):

this.setState({ art: res.article }, () => {
    // this happens after the state has been updated
    console.log(this.state.art);
});

in regards to your comment about setting the state in the lifecycle methid then it's perfectly fine as long as you do it in componentWillMount and not in componentDidMount.

Upvotes: 1

Related Questions