微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

反应从阵列中删除元素

分类：编程问答

如何解决反应从阵列中删除元素

希望您一切都好。我环顾了一段时间，一直无法找到解决这个问题的方法。我遇到的问题是我无法从显示的数组中删除一项。之所以无法删除它，是因为一旦该元素显示在子组件中，然后又带回到父组件中，它的 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;

enter image description here

解决方法

您能否阐明为什么将数组从子级传递回父级？

我相信正确的结构是父级以其状态存储数组。然后可以将数组传递给子级。它还应该将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 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot