主页 / 问题 / 934547
Accepted
Дмитрий Сухоцкий
Asked:2020-01-21 03:36:20 +0000 UTC2020-01-21 03:36:20 +0000 UTC

更新数组元素值

  • 772

更新值时遇到错误。我传递了值，但状态没有更新。我正在寻找传递的ID。因此，NewArr 数组接收到不正确的数据。

state = {
mobile : [
  {"id": 0, "name": "Dima", "phone": 12345},
  {"id": 1, "name": "Ira", "phone": 67890},
]

 saveItem = (name,phone,id) => {
let NewArr = this.state.mobile;
NewArr = NewArr.map(el => {
  if (el.id === id) {
    el.name = name;
    el.phone = phone
  }
  return NewArr;
})
this.setState({
  mobile: NewArr,
  read:false
})

我正在尝试像这样更新，但我不知道如何找到 NewMobile[index] 索引。最有可能在过滤器中，但如何将其转移到外部不起作用

    const newItem = {
  id: id,
  name: text,
  phone: phone
}
let NewArray = this.state.mobile.filter(el => el.id === id);
const a = this.state.mobile.indexOf(NewArray);
NewArray = newItem;
const NewMobile = this.state.mobile;
NewMobile[a] = NewArray;
this.setState({
  mobile: NewMobile

})
javascript

1 个回答

  1. Best Answer
    1. 永远不要改变状态，您需要制作数组的副本，理想情况下是深层副本。
    2. 使用解构。
    3. 过滤器，映射等根据条件创建一个新数组..您需要编写一个新元素。也就是说，在我的实现中添加一个条件，检查旧数组id是否有，如果有，则不要添加新元素，如果没有，则添加
    4. 移动这个名称并不能很好地捕捉它存储的内容。
    5. 最好将对象用作函数的输入参数saveMobile，而不是单独使用每个参数。单独使用每个参数时，很可能会混淆顺序并通常会出错

    function App() {
  return (
    <div className="App">
      <Some />
    </div>
  );
}

class Some extends React.Component {
  state = {
    phoneNumbers: [
      {
        id: 0,
        name: "Dima",
        phone: 12345
      },
      {
        id: 1,
        name: "Ira",
        phone: 67890
      }
    ]
  };

  saveMobile = obj => {
    const { phoneNumbers } = this.state;
    const clonePhoneNumbers = [...phoneNumbers];
    const contact = clonePhoneNumbers.find(mobile => mobile.id === obj.id);
    if (contact) {
      contact.name = obj.name;
      contact.phone = obj.phone;
    } else {
      clonePhoneNumbers.push({
        id: obj.id,
        name: obj.name,
        phone: obj.phone
      });
    }
    this.setState(() => ({
      phoneNumbers: clonePhoneNumbers
    }));
  };

  renderMobileNumbers = mobiles =>
    mobiles.map(({ id, name, phone }) => (
      <div key={id}>
        <p> id: {id} </p>
        <p> name: {name} </p>
        <p> phone: {phone} </p>
      </div>
    ));

  render() {
    const { phoneNumbers } = this.state;
    return (
      <div>
        {this.renderMobileNumbers(phoneNumbers)}
        <button
          onClick={() =>
            this.saveMobile({ id: 92, name: "vlad", phone: 2121321 })
          }
        >
          save
        </button>
        <button
          onClick={() =>
            this.saveMobile({ id: 92, name: "eeee", phone: 2121321 })
          }
        >
          save
        </button>
      </div>
    );
  }
}

// Render it
ReactDOM.render(<App />, document.getElementById("root"));
    <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

    • 1

相关问题