Komponente wird nicht gerendert

Question

Ich habe eine Komponente, die es nicht Unterkomponente rendern wird. Es gibt keine Fehler in der Konsole. Ich erhalte die Daten, die ich vom Web-Call benötige, keine Fehler damit. Nicht sicher, warum die Projektkomponente nichts rendert.

Data Retrieval-Funktionen in separaten Datei:

window.getCurrentUsersGroups = function() { 
    var d = $.Deferred(); 
    var currentUsersBusinessArea = null; 

    var userGroups = $().SPServices({ 
    operation: "GetGroupCollectionFromUser", 
    userLoginName: $().SPServices.SPGetCurrentUser() 
    }); 

    userGroups.then(function(response) { 
    var groups = []; 

    $(response).find("Group").each(function() { 
     var self = $(this); 
     groups.push(self.attr("Name")) 
    }); 

    currentUsersBusinessArea = _.filter(groups, function(group) { 
     return _.startsWith(group, "BusinessArea") 
    }); 
    d.resolve(getListings(currentUsersBusinessArea[0])) 
    }) 
    return d.promise(); 
} 

window.getListings = function(businessArea) { 
    var d = $.Deferred(); 
    var projects = []; 

    var listings = $().SPServices.SPGetListItemsJson({ 
    listName: "Projects", 
    CAMLQuery: "<Query><Where><Eq><FieldRef Name='" + businessArea + "'/><Value Type='String'>Unassigned</Value></Eq></Where></Query>" 
    }); 

    listings.then(function() { 
    var result = this.data; 

    result.map(function(project){ 
     projects.push({ 
     id: project.ID, 
     pID: project.ProjectID, 
     title: project.Title, 
     status: project.Status, 
     created: project.Created, 
     businessArea: project.BusinessAreaFinanceAccounting, 
     sponsor: project.SponsoringArea, 
     comments: project.Comments 
     }) 
    }) 
    d.resolve({businessArea: businessArea, projects: projects}) 
    }) 
    return d.promise(); 
} 

Listing Komponente:

class Listings extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     businessArea: null, 
     projects: [], 
    }; 
    }; 

    componentDidMount() { 
    let that = this; 
    window.getCurrentUsersGroups().then(function(response) { 
     response.then(function(data){ 
     that.setState({businessArea: data.businessArea}) 
     that.setState({projects: data.projects}) 
     }) 
    }) 
    }; 

    render() { 
    let {businessArea, projects} = this.state; 
    console.log(this.state) 

    return (
     <section className="listingsContainer"> 
     <h3>{businessArea}</h3> 

     <hr></hr> 

     <table className="ms-Table"> 
      <thead> 
       <tr> 
       <th>Edit</th> 
       <th>Project ID</th> 
       <th>Project Name</th> 
       <th>Response Status</th> 
       <th>Initiated Date</th> 
       <th>BA Impact</th> 
       <th>Sponsor</th> 
       <th>Comments</th> 
       </tr> 
      </thead> 
      <tbody> 
      { 
       projects.map(function({project,index}) { 
       console.log(project.ID) 
       return <Project key={project.id} project={project} index={index} /> 
       }) 
      } 
      </tbody> 
     </table> 
     </section> 
    ) 
    } 
} 

Projektkomponente:

const Project = ({project, index}) => { 
    return (
    <tr key={index + project.ID}> 
     <td> 
     <a href={_spPageContextInfo.webAbsoluteUrl + '/SitePages/Business%20Project%20Edit.aspx?ProjectID=' + project.ID}> 
      <span style="font-size:1em;" className="ms-Icon ms-Icon--editBox"></span> 
     </a> 
     </td> 
     <td>{project.ProjectID}</td> 
     <td>{project.Title}</td> 
     <td>{project.Status}</td> 
     <td>{project.Created}</td> 
     <td>{project.BusinessAreaFinanceAccounting}</td> 
     <td>{project.SponsoringArea}</td> 
     <td>{project.Comments}</td> 
    </tr> 
); 
}; 

Browser Ergebnis:

Wenn ich Ausgang $ r im In der Konsole enthält der Status der Listing-Komponente Projekte. Aber das react dev tool sagt, dass das Array 0 ist und nichts rendert. Verwirrt.

Answer 1

Scheint, wie Sie Ihre project mit geschweiften Klammern zu wickeln vergessen:

const Project = ({project}) => { 
    return (
    <tr> 
     <td> 
     <a href={_spPageContextInfo.webAbsoluteUrl + '/SitePages/Business%20Project%20Edit.aspx?ProjectID=' + project}> 
      <span style="font-size:1em;" className="ms-Icon ms-Icon--editBox"></span> 
     </a> 
     </td> 
     <td>{project.ProjectID}</td> 
     <td>{project.Title}</td> 
     <td>{project.Status}</td> 
     <td>{project.Created}</td> 
     <td>{project.BusinessAreaFinanceAccounting}</td> 
     <td>{project.SponsoringArea}</td> 
     <td>{project.Comments}</td> 
    </tr> 
); 
}; 

Hier ist ein schöner Weg, die Bauteile zu handhaben:

class Listings extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     data: [], 
     businessArea: null 
    }; 
    } 

    componentDidMount() { 
    let that = this; 
    let groups = []; 

    let userGroups = $().SPServices({ 
     operation: "GetGroupCollectionFromUser", 
     userLoginName: $().SPServices.SPGetCurrentUser() 
    }); 

    userGroups.then((response) => { 

     $(response).find("Group").each(function() { 
     let self = $(this); 
     groups.push(self.attr("Name")) 
     }); 

     let currentUsersBusinessArea = _.filter(groups, (group) => _.startsWith(group, "BusinessArea")); 
     this.setState({businessArea: currentUsersBusinessArea}) 
    }).then(getListings) 

    function getListings() { 
     let listings = $().SPServices.SPGetListItemsJson({ 
     listName: "Projects", 
     CAMLQuery: "<Query><Where><Eq><FieldRef Name='" + that.state.businessArea + "'/><Value Type='String'>Unassigned</Value></Eq></Where></Query>" 
     }); 

     listings.then(function() { 
     that.setState({data: this.data}); 
     }) 
    }; 
    } 

    render() { 
    let {data, businessArea} = this.state; 
    return (
     <section className="listingsContainer"> 
     <h3>{`Business Area ${businessArea}`}</h3> 
     <hr></hr> 
     <table className="ms-Table"> 
      <thead> 
      <tr> 
       <th>Edit</th> 
       <th>Project ID</th> 
       <th>Project Name</th> 
       <th>Response Status</th> 
       <th>Initiated Date</th> 
       <th>BA Impact</th> 
       <th>Sponsor</th> 
       <th>Comments</th> 
      </tr> 
      </thead> 
      <tbody> 
      {data.map({project,index}) => <Project key={index} project={project} /> } 
      </tbody> 
     </table> 
     </section> 
    ) 
    } 
} 

const Project = ({project}) => (
    <tr> 
     <td> 
     <a href={_spPageContextInfo.webAbsoluteUrl`/SitePages/Business%20Project%20Edit.aspx?ProjectID=${project}`}> 
      <span style={{'fontSize':'1em'}} className="ms-Icon ms-Icon--editBox"></span> 
     </a> 
     </td> 
     <td>{project.ProjectID}</td> 
     <td>{project.Title}</td> 
     <td>{project.Status}</td> 
     <td>{project.Created}</td> 
     <td>{project.BusinessAreaFinanceAccounting}</td> 
     <td>{project.SponsoringArea}</td> 
     <td>{project.Comments}</td> 
    </tr> 
); 

Tipp: Mischen Sie niemals JQuery mit Reagieren auf Komponenten

Answer 2

Der Hauptgrund, es war nicht zu machen ist, weil diese Tabellenzelle:

<td> 
    <a href={_spPageContextInfo.webAbsoluteUrl + '/SitePages/Business%20Project%20Edit.aspx?ProjectID=' + project.ID}> 
     <span style="font-size:1em;" className="ms-Icon ms-Icon--editBox"></span> 
    </a> 
    </td> 

Der Span-Tag als style Eigenschaft. Was verhindert, dass es von dem, was ich sehe, rendert.