我是ReactJS的新手。
我正在获取数据以加载网格“ populateGrid()”,并获取另一个以阶段“ populateDropDown()”填充下拉列表
$response = $this->call('POST', '/api', [$xml]);
然后渲染:
const optionsStages = []
class CommentsTableComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoaded: false,
filterDescription: '',
projectID: '',
xtoken: '',
};
this.populateGrid = this.populateGrid.bind(this);
this.populateDropDown = this.populateDropDown.bind(this);
localStorage.setItem("projectID", this.props.match.params.projectID)
}
componentDidMount() {
this.populateGrid();
this.populateDropDown();
}
populateGrid() {
const tokenvalue = document.getElementsByName("__RequestVerificationToken")[0].value;
projectID = this.props.match.params.projectID;
let config = {
method: 'POST',
body: JSON.stringify({ projectID: projectID }),
headers: {
"XSRF-TOKEN": tokenvalue,
"Content-Type": "application/json; charset=utf-8"
}
}
fetch('/WebServices/GetThreadsByProjectID?handler=Send', config)
.then(res => res.json())
.then(response =>
this.setState({
data: response,
projectID: projectID
}, () => {
console.log(this.state.data[0]);
})
)
.catch(error => console.error('Error:', error));
}
populateDropDown() {
const tokenvalue = document.getElementsByName("__RequestVerificationToken")[0].value;
projectID = localStorage.getItem("projectID");
let config = {
method: 'POST',
body: JSON.stringify({ projectID: projectID }),
headers: {
"XSRF-TOKEN": tokenvalue,
"Content-Type": "application/json; charset=utf-8"
}
}
fetch('/WebServices/GetStagesByProjectID?handler=Send', config)
.then(res => res.json())
.then(response => {
const allObj = { value: 'all', label: 'All' };
var newStages = Array.from(response, obj => {
var rObj = { value: obj.id, label: obj.stage };
return rObj;
});
newStages.push(allObj);
this.setState({
optionsStages: newStages,
projectID: projectID
}, () => {
console.log(this.state.optionsStages);
})
})
.catch(error => console.error('Error:', error));
}
handleDropDownChange(event) {
console.log("event:", event)
this.setState({ value: event.target.value });
console.log("propreities:", this.state)
}
我能够使用populateDropDown()返回的数据加载下拉列表,但我想按阶段(第3行)进行过滤。
我看了其他示例,但是区别是我正在从数据库中加载下拉数据。