我正在遵循本教程,并慢慢地朝自己的方向发展。有一个房屋列表,带有一个链接按钮,可以将您发送到包含人员列表的页面。但是当您通过 house
单击链接按钮时它将显示houseId
在网址中。当加载人员列表时,我希望它检查 url 是否有 houseId
或不。
如果它有 Id,则执行 getPeopleFromHouse
基本上axios
-调用并将数据放入 people: []
位于 this.state = {...}
中。很难提出这个问题,因此对于上下文,这里是我的代码:
getPeopleFromHouse = (HouseId) => {
axios.get("http://localhost:8080/house/getPeople/" + HouseId)
.then(response => response.data)
.then((data) => {
this.setState({people:data});
});
}
这是在 return
中的render()
,我基本上想在有 Id 时摆脱按钮(添加、编辑、删除),最后执行该方法,这样它只显示那一所房子的人:
<Card.Body>
<table striped bordered hover variant="dark">
<thead>
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>#</th>
</tr>
</thead>
<tbody onLoad={!isNaN(parseInt(this.state.urlLastId)) === true ? this.getPeopleFromHouse(this.state.urlLastId) :
null}> {this.state.people.length === 0 ?
<tr align="center">
<td colspan="{3}">{people.length} Users Available.</td>
</tr>
: currentPeople.map((person) => (
<tr key="{person.PersonId}">
<td>{person.FullName}</td>
<td>{person.PhoneNumber}</td>
<td>
<ButtonGroup>
<Link to={"addPersonToHouse/" + person.PersonId} className="btn btn-sm btn-outline-info">Add To House </Link>
<Link to={"editPerson/" + person.PersonId} className="btn btn-sm btn-outline-primary">Edit </Link>
<button size="sm" variant="outline-danger" onClick="{this.deletePerson.bind(this," person.PersonId)}>
Delete
</button>
</ButtonGroup>
</td>
</tr>
)) }
</table>
</Card.Body>
最后一件事对格式感到抱歉,但是当我 ctrl+v 我的代码时,它只是保持奇怪的格式,我不知道如何修复它。
编辑:
@Always Learning 的解决方案很好,但它不起作用,因为我还没有为其制定路线,所以我添加了 <Route path={"/getPeopleFromHouse/:houseId"} exact component={PersonList}/>
现在它可以工作了:D
最佳答案
我发现最好在 return 语句之前实现这样的逻辑,因此您可以执行以下操作:
const getPeopleRow = () => {
console.log(">>>getPeopleRow called", this.state.people.length);
return (
<tr align="center">
<td colspan="{3}">{this.state.people.length} Users Available.</td>
</tr>
);
}
const getButtonGroup = (currentPeople) => {
console.log(">>>getButtonGroup called",currentPeople);
return currentPeople.map((person) => (
<tr key="{person.PersonId}">
<td>{person.FullName}</td>
<td>{person.PhoneNumber}</td>
<td>
<ButtonGroup>
<Link to={"addPersonToHouse/" + person.PersonId} className="btn btn-sm btn-outline-info">Add To House </Link>
<Link to={"editPerson/" + person.PersonId} className="btn btn-sm btn-outline-primary">Edit </Link>
<button size="sm" variant="outline-danger" onClick="{this.deletePerson.bind(this," person.PersonId)}>
Delete
</button>
</ButtonGroup>
</td>
</tr>
));
}
render() {
let rows;
if (this.state.people.length === 0) {
rows = this.getPeopleRow();
}
else rows = this.getButtonGroup(currentPeople);
console.log(">>>got Rows:",rows);
return (
<Card.Body>
<table striped bordered hover variant="dark">
<thead>
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>#</th>
</tr>
</thead>
<tbody onLoad={!isNaN(parseInt(this.state.urlLastId)) === true ? this.getPeopleFromHouse(this.state.urlLastId) :
null}>
{ rows }
</table>
</Card.Body>
);
}
甚至可能将 onLoad
处理移到 React 生命周期方法之外,这样它就会在组件加载时启动,而不是在表加载时启动。
关于javascript - 如何在页面加载时使用四元运算符执行函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61343777/