是否正确更新反应状态/组分?

问题描述 投票:0回答:1

而且我现在正在尝试使我的组件对更新具有反应性。我正在使用componentDidUpdate()检查组件prop状态是否已更改,如果已经更改,则需要调用getPosts函数,并且如果该prop被更改,则需要postCount进行更新。

export default class JsonFeed extends React.Component<IJsonFeedProps, IJsonFeedState> {

  // Props & state needed for the component
  constructor(props) {
    super(props);
    this.state = {
      description: this.props.description,
      posts: [],
      isLoading: true,
      jsonUrl: this.props.jsonUrl,
      postCount: this.props.postCount,
      errors: null,
      error: null
    };
  }

  // This function runs when a prop choice has been updated
  componentDidUpdate() {
    // Typical usage (don't forget to compare props):
    if (this.state !== this.state) {
      this.getPosts();
      // something else ????
    }
  }

  // This function runs when component is first renderd
  public componentDidMount() {
    this.getPosts();
  }

  // Grabs the posts from the json url
  public getPosts() {
    axios
      .get("https://cors-anywhere.herokuapp.com/" + this.props.jsonUrl)
      .then(response =>
        response.data.map(post => ({
          id: `${post.Id}`,
          name: `${post.Name}`,
          summary: `${post.Summary}`,
          url: `${post.AbsoluteUrl}`
        }))
      )
      .then(posts => {
        this.setState({
          posts,
          isLoading: false
        });
      })
    // We can still use the `.catch()` method since axios is promise-based
    .catch(error => this.setState({ error, isLoading: false }));
  }
javascript reactjs
1个回答
0
投票
 // This function runs when a prop choice has been updated
   componentDidUpdate(prevProps,prevState) {
   // Typical usage (don't forget to compare props):
   if (prevState !== this.state) {
     this.getPosts();
     // something else ????
    }
   }

这样您必须与更新后的状态匹配

© www.soinside.com 2019 - 2024. All rights reserved.