Question

我有一个不会渲染它的子组件的组件。控制台中没有错误。我通过网络电话获得了我需要的数据，没有错误。不确定为什么Project组件没有呈现任何内容。

数据检索功能在单独的文件中：

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();
}

列出组件：

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>
    )
  }
}

项目组成部分：

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>
  );
};

浏览器结果：

如果我在控制台中输出$ r，则清单组件状态中包含项目。但是反应开发工具说数组是0并且没有任何渲染。困惑。

Answer 1

好像你忘了用大括号包裹你的project：

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>
  );
};

这是处理组件的更好方法：

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>
);

提示：永远不要将Jquery与React组件混合

Answer 2

它没有渲染的主要原因是因为这个表格单元格：

  <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>

span标记为style属性。这是阻止它从我能看到的渲染。

组件未呈现

2 个答案: