如何解决反应从阵列中删除元素
希望您一切都好。我环顾了一段时间，一直无法找到解决这个问题的方法。我遇到的问题是我无法从显示的数组中删除一项。之所以无法删除它，是因为一旦该元素显示在子组件中，然后又带回到父组件中，它的 shape 就不再具有与之相同的形状进入子组件。它以数组的形式进入子组件，并以其他形式从对象中作为对象出来。有人可以帮助我理解为什么该对象（凝视）正在改变其形状，以及如何将其形状保存为数组，然后从中删除元素吗？
当数组返回到父组件时，我无法将其保留为数组。
我查看了很多资源，无法弄清楚。我正在尝试从数组中删除一个对象，以便将其从实时反应中删除。问题是，当prevState.mapped（object）从呈现单个卡的组件块返回时，该prevState.mapped（object）未被识别为数组，该单个卡呈现了数组中的每个对象。我相信这与Formik有关。我尝试了以下方法：
- 我试图用'prevState.etc'作为一个数组设置一个单独的变量，然后将其从数组中删除，然后放入状态。
- 我已尝试处理组件中正在呈现的数组，，但这也不起作用。我这样做的目的是，一旦它返回到父组件，也许会帮助我使用它，因为它将具有适当的形状。
我四处张望，但我一定不要问正确的问题，因为我无法得到为什么我正在使用的prevState对象一旦返回就不是数组的答案到父组件。我毫不怀疑，解决问题的方法很简单。我已经粘贴了以下相关代码：它按照运行的顺序粘贴：
1。）代码的这一部分进行AXIOS调用，并在成功进行调用后，将数据过滤到卡组件中。
class Organizations extends Component {
constructor(props) {
super(props);
this.state = { organizations: [],mappedOrgs: [] };
}
//ORG LOAD
componentDidMount() {
paginatedList(0,8).then(this.onOrgSuccess);
}
//ORG CALL SUCCESS
onOrgSuccess = (config) => {
let organizations = config.item.pagedItems;
this.setState((prevState) => {
return {
...prevState,mappedOrgs: organizations.map(this.mapOrg),};
},this.stateChanged);
};
mapOrg = (Organization) => (
_logger(Organization,"ORGANIZATION,ORGANIZATION"),(
<OrgCard
Organization={Organization}
key={Organization.id}
editOrganization={this.editOrganization}
deleteFunction={this.deleteFunction}
/>
)
);
2。）以下是卡组件中的功能。 “删除句柄”功能也确实遍历了该组件，因此，我也对它进行了描述。显然，它是整体呈现的组件的一部分。
const OrgCard = ({ Organization,editOrganization,deleteFunction }) => {
//OPERATIONAL FUNCTIONS
_logger(Organization);
//DELETE
const OrgDelete = () => {
deleteOrg(Organization.id).then(deleteSuccess).catch(deleteToastFail);
};
//SUCCESS FUNCTIONS
const deleteSuccess = () => {
deleteFunction(Organization);
};
<Button
onClick={OrgDelete}
className="btn-danger btn-lg center"
align="center"
>
Delete
</Button>
下面是应该从数组中删除的函数。这是您在上面看到的父级组件，并且与编号为“ 1”的代码主体位于同一代码主体内。令人反感的代码周围有两颗星，实际代码中显然没有两颗星。
deleteFunction = (deletedOrg) => {
this.setState((prevState) => {
const indexOfOrg = **prevState.mappedOrgs**.findIndex(
(Org) => Org.id === deletedOrg.id
);
let updatedOrgs = [...prevState.mappedOrgs];
if (indexOfOrg >= 0) {
updatedOrgs.slice(indexOfOrg,1);
}
_logger(updatedOrgs);
return { mappedOrgs: updatedOrgs };
},this.stateChanged);
};
我对Formik并不了解，并且对道具的验证也不是很了解，所以我也将其张贴在下面，以防万一。
这是在代码主体中编号为“ 1”的道具验证
Organizations.propTypes = {
history: PropTypes.shape({
push: PropTypes.func,}),findIndex: PropTypes.func,deleteFunction: PropTypes.checkPropTypes({
deletedOrg: PropTypes.number,mappedOrgs: PropTypes.array,updatedOrgs: PropTypes.array,splice: PropTypes.func,indexOfOrg: PropTypes.number,};
我已经尝试了很多事情，甚至在卡片渲染中也进行了道具验证。在这种情况下，它在'2'中。
OrgCard.propTypes = {
Organization: PropTypes.shape({
id: PropTypes.number,OrganizationTypeId: PropTypes.number,name: PropTypes.string,description: PropTypes.string,logo: PropTypes.string,locationId: PropTypes.number,phone: PropTypes.string,siteUrl: PropTypes.string,}).isRequired,deleteOrg: PropTypes.func,deleteFunction: PropTypes.func,editOrganization: PropTypes.func,};
这是第一段代码。
class Organizations extends Component {
constructor(props) {
super(props);
this.state = { organizations: [],(
<OrgCard
Organization={Organization}
key={Organization.id}
editOrganization={this.editOrganization}
deleteFunction={this.deleteFunction}
/>
)
);
//DELETE
deleteFunction = (deletedOrg) => {
this.setState((prevState) => {
const indexOfOrg = prevState.mappedOrgs.findIndex(
(Org) => Org.id === deletedOrg.id
);
let updatedOrgs = [...prevState.mappedOrgs];
if (indexOfOrg >= 0) {
updatedOrgs.slice(indexOfOrg,this.stateChanged);
};
//MAP ORG
editOrganization = (Organization) => {
this.props.history.push(
`/organization/${Organization.id}/edit`,Organization
);
};
//RENDER
render() {
return (
<div className="col-12">
<div className="row">{this.state.mappedOrgs}</div>
</div>
);
}
}
Organizations.propTypes = {
history: PropTypes.shape({
push: PropTypes.func,};
export default Organizations;
这是第二段代码。
const OrgCard = ({ Organization,deleteFunction }) => {
//OPERATIONAL FUNCTIONS
_logger(Organization);
//DELETE
const OrgDelete = () => {
deleteOrg(Organization.id).then(deleteSuccess).catch(deleteToastFail);
};
//SUCCESS FUNCTIONS
const deleteSuccess = () => {
deleteFunction(Organization);
};
//FAIL FUNCTION
const deleteToastFail = () => {
toast.error("Delete Error",{
closeOnClick: true,position: "top-center",});
};
//EDIT
const handleEdit = () => {
editOrganization(Organization);
};
return (
<Card className="col-lg-6 col-md-6 col-sm-6">
{" "}
<CardHeader style={{ fontWeight: "bold" }} className="text-center">
{Organization.name}
</CardHeader>
<CardBody>
<CardImg src={Organization.logo} />
{/* <CardText>
<span>{Organization.description.slice(0,120)}</span>
</CardText> */}
<CardText>
<span>{Organization.id}</span>
</CardText>
<Button
onClick={handleEdit}
className="btn-sucess btn-lg center"
align="center"
>
Edit
</Button>
<Button
onClick={OrgDelete}
className="btn-danger btn-lg center"
align="center"
>
Delete
</Button>
</CardBody>
</Card>
);
};
OrgCard.propTypes = {
Organization: PropTypes.shape({
id: PropTypes.number,};
export default OrgCard;
解决方法
您能否阐明为什么将数组从子级传递回父级？
我相信正确的结构是父级以其状态存储数组。然后可以将数组传递给子级。它还应该将delete函数传递给子级（此函数应将索引作为参数）。此功能在父级中定义。父级通过传递函数名称将函数传递给子级。子级如果要从数组中删除某项，则将调用该函数并将其要删除的项的索引传递给该函数。然后，该函数（位于父对象中）将从其数组（存储在该父对象的状态）中删除该项目。这也将自动导致在子级中显示的数组也进行更新。
这个想法是，数组只能从父级传递到子级。父级应该处理所有数组操作。子级只应通过调用带有相关参数（例如索引）的函数（从父级传递给该函数），将有关数组的信息传递给父级。
,以下是我最终为这个问题提出的解决方案。希望对其他人有帮助。
removeFromArray = (deletedCompany) => {
this.setState((prevState) => {
const indexOfCompany = prevState.Companies.findIndex(
(removeCompany) => removeCompany.id === deletedCompany.id
);
if (indexOfCompany === -1) {
this.toastErrorDelete();
return;
} else {
const updatedCompanies = [...prevState.Companies];
updatedCompanies.splice(indexOfCompany,1);
return { Companies: updatedCompanies };
}
},this.clearForm());
};
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。