如何从嵌套对象的数组中删除元素？（lodash）[重复]答案

【问题标题】：How to remove an element from an array in a nested object? (lodash) [duplicate]如何从嵌套对象的数组中删除元素？（lodash）[重复]
【发布时间】：2019-12-17 02:26:50
【问题描述】：

我有一个类似的对象

data: {
    registrationNumber: 'MH1234',
    type: 'xyz',
    driver: {
      user: {
        firstName: 'xyz',
        lastName: 'abc',
        email: 'xyz',
        phone: 1234,
        city: 'random',
        dateOfBirth: new Date(),
        groups: [1]
      }
    },
    owner: {
      user: {
        firstName: 'xyz',
        lastName: 'abc',
        email: 'xyz',
        phone: '1234',
        city: 'random',
        groups: [1, 2]
      },
      kyc: [
        {
          method: 'xyz',
          id: 'abcd'
        },
        {
          method: 'xyz',
          id: 'abcd'
        }
      ]
    }
  }

如何删除路径 data.owner.kyc.0 处的元素？

我尝试过使用 _.unset() 但它并不理想，因为删除后数组仍然显示 2 个元素

【问题讨论】：

你可以做obj.data.owner.kyc = obj.data.owner.kyc.splice(1);，没有lodash

标签： javascript arrays reactjs underscore.js lodash

【解决方案1】：

您不需要lodash 来完成此操作。

使用.shift() 从数组中删除第一个元素。

let newData = {...data}

newData.owner.kyc.shift()

用.splice()从某个点移除元素。

let newData = {...data}

newData.owner.kyc.splice(0, 1)

用.filter()删除不符合指定条件的项目

let newData = {...data}

newData.owner.kyc = newData.owner.kyc.filter((item, index) => {
   return index !== 0
})

由于您使用的是 React，因此您希望这些数据处于组件状态，以便当您实际从数组中删除某些内容时，应用会更新以反映新结果。

查看沙盒：https://codesandbox.io/s/mystifying-fog-2yhwd

class App extends React.Component {
  state = {
    data: data
  };

  removeFirstItem = () => {
    const { data } = this.state;

    let newData = { ...data };

    newData.owner.kyc.shift();

    this.setState({
      data: newData
    });
  };

  render() {
    const { data } = this.state;
    return (
      <div>
        <h4>Car Info:</h4>
        <div>
          KYC:
          {data.owner.kyc.map((item, index) => {
            return (
              <div>
                <span>{index + 1}) </span>
                {item.id}
              </div>
            );
          })}
        </div>
        <button onClick={this.removeFirstItem}>Remove first item</button>
      </div>
    );
  }
}

【讨论】：

这成功了。谢谢你:)
@malikbagwala 不客气 :)

【解决方案2】：

您可以使用 Array 原型方法本身，如果你想从前面移除

Array.prototype.shift.apply(data.owner.kyc,null)

【讨论】：

【解决方案3】：

您可以使用_.remove 或_.filter。

请参考example

【讨论】：