检测ReactJS页面变化

Question

我是ReactJS的新手，所以一直在使用它的一些网站上进行实验。现在，我试图根据页面URL对API进行AJAX调用。问题是，无论何时单击链接，我的代码都会中断，因为它没有检测到页面更改。我目前的做法是监听所有链接上的点击事件，并搭载我在页面加载时看到的两个选择器（pageLoading - loading和pageLoading - 完成）。有没有更好的方法来检测单页面应用程序的页面更改？由于这些是实验，所以我没有访问服务器的情况参考。以下是我目前的代码方法。

//When any link on the page is clicked 
document.body.onclick = function(e){ 
    e = e || event; 
    var from = findParent('a',e.target || e.srcElement); 
    if (from){ 
    //check if pageLoading--finished ran then make an AJAX request 
    console.log(__reactContent['url']); 
    } 
} 
//find first parent with tagName [tagname] 
function findParent(tagname,el){ 
    if ((el.nodeName || el.tagName).toLowerCase()===tagname.toLowerCase()){ 
    return el; 
    } 
    while (el = el.parentNode){ 
    if ((el.nodeName || el.tagName).toLowerCase()===tagname.toLowerCase()){ 
     return el; 
    } 
    } 
    return null; 
} 

Answer 1

尝试使用setState。这种反应会通知页面变化和处理事件。以下是向笔记数组添加新笔记的简单示例。

addNote =() => { 
     this.setState({ 
      notes: this.state.notes.concat([{ 
       id: uuid.v4(), 
       task: 'new task' 
      }]) 
     }) 
    } 

更多一些信息退房https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html