удаление индекса из массива объектов вact.js всегда удаляет последний индекс - PullRequest
Новая
       21

удаление индекса из массива объектов вact.js всегда удаляет последний индекс

0 голосов
/ 01 марта 2019

У меня проблема с удалением индекса из массива объектов вact.js.

У меня есть таблица, которая отображает имя и значение данных из состояния.Каждая строка будет иметь кнопку, чтобы удалить его, и это работает.

Есть еще одна кнопка, которая выдвигает новый объект ввода HTML в массив, чтобы пользователь мог добавлять новые значения.У меня проблема с кнопкой удаления.Если я добавлю 2 или 3 строки, кнопка удаления всегда удаляет последнюю строку.

Я не уверен, почему кнопка удаления не работает.

Я ценю, если кто-нибудь может помочь.

Вот код: 

class App extends Component {
  constructor(props) {
  super(props);
  this.state = {
    datas: [
      { name: 'test', value: 'test' },
      { name: 'test 1', value: 'test 1' }
    ]
  }
}

delete = (index) => {
  let datas = this.state.datas.filter((e, i) => i !== index);
  this.setState({ datas : datas });
}

addnew = () => {
  let datas = this.state.datas;
  datas.push( {name: <input />, value: <input /> })
  this.setState({ datas : datas });
}

render() {
  return (
    <div>
      <button onClick={this.addnew}>Add</button>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Value</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {this.state.datas.map((data, index) => (
            <tr key={index}>
              <th>{data.name}</th>
              <th>{data.value}</th>
              <th><button onClick={() => this.delete(index)}>delete</button>                  </th>
          </tr>
         ))}
        </tbody>
      </table>
    </div>
  );
}}
export default App;

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Я считаю, что проблема заключается в использовании индекса карты в качестве ключа.Вы можете иметь свойство индекса в каждом элементе. 

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      datas: [
        { index:0, name: "test", value: "test" },
        { index:1, name: "test 1", value: "test 1" },
        { index:2,  name: "test 2", value: "test 2" }
      ],
      counter: 3
    };
  }

  delete = index => {
    let datas = this.state.datas.filter((e, i) => i !== index);
    this.setState({ datas: datas });
  };

  addnew = () => {
    let datas = this.state.datas;
    datas.push({ index: this.state.counter, name: <input />, value: <input /> });
    this.setState({ datas: datas, counter: this.state.counter + 1 });
  };

  render() {
    return (
      <div>
        <button onClick={this.addnew}>Add</button>
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Value</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {this.state.datas.map((data, index) => (
              <tr key={data.index}>
                <th>{data.name}</th>
                <th>{data.value}</th>
                <th>
                  <button onClick={() => this.delete(index)}>delete</button>{" "}
                </th>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

Изменить на CodeSandbox: https://codesandbox.io/embed/p57now4pjx?fontsize=14

0 голосов
/ 01 марта 2019

При добавлении строки вы устанавливаете начальные значения в качестве элементов ввода.Чем при удалении вы смотрите в массиве индекс объекта, содержащего входные элементы.Функция indexOf возвращает первый индекс вхождения.

Лучшее решение - обновить кнопку удаления, чтобы передать индекс удаляемого элемента 

            <th><button onClick={() => this.delete(index)}

, чем просто удалить элемент с указанным индексом в вашей функции. 

delete = (index) => {
    let datas = this.state.datas.filter((e, i) => i !== index);
    this.setState({ datas : datas });
  }

Но это еще не полностью исправит ваше решение, потому что вы устанавливаете новый элемент массива для хранения элементов ввода.Что вы не должны.

...