0
サブコンポーネントをレンダリングしないコンポーネントがあります。コンソールにエラーはありません。私はWeb呼び出しから必要なデータを取得しますが、エラーはありません。プロジェクトコンポーネントが何もレンダリングしていない理由は不明です。レンダリングされないコンポーネント
別のファイルにデータ検索機能：
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>
);
};
ブラウザ結果：
もしI出力$ rをにコンソール、リストコンポーネントの状態にはプロジェクトがあります。しかし、反応開発ツールは配列が0でレンダリングがないと言っています。混乱している。
なぜ反応してjQueryを使用していますか？そしてこのバインディングは無効です。 'project.ProjectID'中括弧が必要です –
'render（）'に 'data.length'とは何ですか？ – robertklep
プロジェクトデータをレンダリングする ''の中に中括弧がありません。 '{project.ProjectID}' –