如何保存到状态并保存到获取API的本地变量结果

Question

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.

Answer 1

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 .