大佬教程收集整理的这篇文章主要介绍了无法从列表中删除组件(React Hook),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
当我点击按钮触发移除时,我试图移除 React 状态(ListItem 组件)。但是,从状态中删除 React 后,它无法重新渲染。我该如何正确执行此操作?
import {Button,List} from "@material-ui/core";
import React,{useLayoutEffect,useStatE} from "react";
import useRules from "../sharedStates/Rules";
import useLanguange from "../sharedStates/Languages";
import axios from "axios";
import ListItem from "@material-ui/core/ListItem";
const refresH_JWT_URL = "/auth/API/refresh_jwt/"
const BLOCKCHAIN_deletE_URL = "blockchain/API/rule/?ID="
const DATALAKE_REMOVE_URL = "datalake/API/remove_rule"
//Todo: Implement Translation.
//Todo: Implement delete Rule.
const RuleList = ({
rules,rerender,userID,groupIDs,orgID,jwtrefresh,jwtAccess,username
}) => {
const [_rules,_setRules] = useState(rules)
const editRule = () => {
console.log("Todo: Implement Edit Rule")
}
const removeRule = (rulEID) => {
console.log("Todo: IMPLEMENT deletE RulE IN THE DB")
//Todo: figure out the reason this is not working
// _setRules(_rules.filter(rule => rule.ID !== rulEID));
}
return (
<List>
{
_rules.map((rule => (
<ListItem key={rule.ID}>
<p> {lang.label.I} {" "} <b>{lang.label[rule.action]}</b> {lang.label.toAccessTags} </p>
<p> <b>
{
Object.values(rule.access).map(tag =>
tag.name
).join(",")
}
</b>
</p>
<p>{lang.label.toTheProfesional} {" "} <b>{rule.granteEID}</b></p>
<p>{lang.label.ruleExpiresIn} {rule.expires}</p>
<button onClick={editRulE}>{lang.label.Edit}</button>
<button onClick={removeRule(rule.ID)}>{lang.label.RemovE}</button>
</ListItem>
)))
}
</List>
)
}
export default RuleList
这将显示在页面中:
当我取消注释这一行时, // _setRules(_rules.filter(rule => rule.ID !== rulEID));
。即使在我单击删除按钮之前,该列表也不会显示在页面上。
请指教。
之前谢谢。
以上是大佬教程为你收集整理的无法从列表中删除组件(React Hook)全部内容,希望文章能够帮你解决无法从列表中删除组件(React Hook)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。