如何使用ReactJS更新内容

Question

我是React的新手，我试图构建一个简单的项目列表，可以单击它来获取数据并更新DOM，我在render()上有一个链接列表。

 const listNews = this.state.news.map((item, i) => 
        <ListGroupItem  key={i} className="font-size-1 text-left">
            <a href='#' onClick={() => this.getInfoNews(i)}>{item.title}</a>
        </ListGroupItem>  
  );

函数"getInfoNews(i)“包含这段代码，用于将数据显示到DOM中

getInfoNews(i){
    var content = {
        news : this.state.news[i]
      }

      console.log(content.news)

  if(content.news === undefined){
      return (
          <Card>
              <CardBody>
                  <CardTitle>Card Title</CardTitle>
                  <CardSubtitle>Card subtitle</CardSubtitle>
                  <CardText>Some quick example text to build on the card title and card's content.</CardText>               
              </CardBody>
          </Card>
        )
  }else{
       return (
          <Card>
            <CardBody>
                <div className="container">
                    <img src={content.news.urlToImage} className="w-100" />
                    <CardTitle>
                      <div className="bottom-left font-size-2 bg-dark w-50 p-2 text-uppercase text-left">{content.news.title}</div>
                    </CardTitle> 
                </div>
                <CardSubtitle className="text-right text-dark font-size-1 mr-4">
                    by {content.news.author ? content.news.author : "Anonymous"} , published at {content.news.publishedAt}
                </CardSubtitle>
                <CardText className="text-dark font-size-2 mt-4">
                  {content.news.description} <a href={content.news.url} target="_blank">read more</a> 
                </CardText>
            </CardBody>
          </Card>
        )
  }

}

工作在加载第一次完美，但不工作，一旦点击每个链接，数据加载，但DOM不更新，有人可以帮助我吗？谢谢!

Answer 1

每当对state或props进行更新时，React都会重新呈现。

例如，您可以从API加载新数据，然后执行this.setState来更新组件state。然后，react将自动重新呈现组件。