[英]React re-render parent from child component not working
我有一个父组件(DevicePage),它加载多个子组件(设备)。 在子组件中,我有用于签入和签出设备的按钮。 当我单击 DevicePage 上的按钮时,页面不会重新呈现,按钮状态也不会改变。
我尝试了一些建议的答案,您将 function 传递给孩子,孩子可以调用以更新父级上的 state (请参阅此处如何从子组件重新渲染父组件),但在我的情况下它不起作用不知道为什么。
这是我所拥有的:
家长
const [devices, setDevices] = useState();
const [count, setCount] = useState(0);
useEffect(() => {
setCount(1)
DeviceService.getAll()
.then(res => {
if(res.data.length > 0) {
setDevices(res.data);
}
});
}, [])
function checkoutDevice(id) {
console.log("About to checkout device");
DeviceService.checkoutDevice(id)
.then(res => {
console.log("Device checked out")
})
.catch(err => "Error checking out device: " + err);
}
function checkinDevice(id) {
DeviceService.checkinDevice(id)
.then(res => {
console.log("Device checked in")
})
.catch(err => "Error checking out device: " + err);
}
function devicesList() {
if(devices) {
return devices.map(currDevice => {
return <Device device={currDevice} checkoutDevice={checkoutDevice} checkinDevice={checkinDevice} key={currDevice._id} />;
});
}
}
return (
<div>
<table className="table">
<thead className="thead-light">
<tr>
<td>Tag</td>
<td>Category</td>
<td>Make</td>
<td>Model</td>
</tr>
</thead>
<tbody>
{devicesList()}
</tbody>
</table>
</div>
)
}
孩子
return (
<tr>
<td><Link to={"/devices/" + props.device._id}>{props.device.tag}</Link></td>
<td>{props.device.category}</td>
<td>{props.device.make}</td>
<td>{props.device.modelName}</td>
{
props.device.available?
<>
<td>
<button type="button" className="btn btn-primary" onClick={() => {props.checkoutDevice(props.device._id)}}>Checkout</button>
</td>
</>
:
<>
<td>
<button type="button" className="btn btn-primary" onClick={() => {props.checkinDevice(props.device._id)}}>Checkin</button>
</td>
</>
}
{
currUser.isAdmin?
<>
<td>
<Link to={{pathname: "/devices/edit/" + props.device._id,
state: {
tag: props.device.tag
}}}>
edit
</Link>
</td>
</>
:
null
}
</tr>
)
您的问题是“页面不会重新呈现并且按钮状态不会改变。”,我的假设是当您单击“结帐”按钮时,您希望它更改为“签入”按钮,反之亦然。 查看 Device 组件中的这个代码块:
{
props.device.available?
<>
<td>
<button type="button" className="btn btn-primary" onClick={() => {props.checkoutDevice(props.device._id)}}>Checkout</button>
</td>
</>
:
<>
<td>
<button type="button" className="btn btn-primary" onClick={() => {props.checkinDevice(props.device._id)}}>Checkin</button>
</td>
</>
}
使用此逻辑,为了更改按钮,您必须更改 device.available,而您的上面的代码没有。 为此,我会推荐 2 个解决方案:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.