Как соединить массив в состоянии компонента React - PullRequest
Новая
       15

Как соединить массив в состоянии компонента React

0 голосов
/ 01 июня 2019

Я делаю приложение расписания.Index.js отображает таблицу.Строки таблицы читаются из массива children.Массив children читает состояние, чтобы поддерживать себя в актуальном состоянии.AddRow () работает нормально.DeleteRow () имеет некоторые проблемы.Я намереваюсь извлечь идентификатор parentNode из события, найти массив состояния, соединить его и позволить детям обновить себя - что, в свою очередь, обновляет рендер.Поэтому, когда строка удаляется, она выделяется из массива состояния, и она, в свою очередь, обновляется в массиве дочерних элементов, а она, в свою очередь, отображается.DeleteRow запускает все, кроме array.splice или indexOf part.Я даже пробовал цикл for, но он не работает.Мой подход правильный? 

index.js    
import React from "react";
import ReactDOM from "react-dom";
import HeaderAndFirstTableRow from "./headerandfirstrow";
import TableRow from "./tablerow";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { noOfRows: [] };
    this.addRow = this.addRow.bind(this);
    this.deleteRow = this.deleteRow.bind(this);
    this.find = this.find.bind(this);
  }
  addRow() {
    let arr = this.state.noOfRows;
    let arrLength = arr.length;
    arr.push(arrLength + 1);
    this.setState({
      noOfRows: arr
    });
  }
  find(arr, id) {
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] === id) {
        return i;
      }
    }
  }
  deleteRow(event) {
    let arr = this.state.noOfRows;
    let id = event.target.parentNode.id;
    let ix = arr.findIndex(id);
    arr.splice(ix, 1);
    this.setState({ noOfRows: arr });
  }
  render() {
    let children = [];
    for (let i = 0; i < this.state.noOfRows.length; i++) {
      children.push(
        <TableRow id={this.state.noOfRows.length} delete={this.deleteRow} />
      );
    }
    return (
      <HeaderAndFirstTableRow click={this.addRow}>
        {children}
      </HeaderAndFirstTableRow>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

headerandfirstrow.js

import React from "react";

import "./styles.css";

export default function HeaderAndFirstTableRow(props) {
  function handler() {
    props.click();
  }
  return (
    <table>
      <tr>
        <th>Feature</th>
        <th>Phase</th>
        <th>Comments</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
        <th>Saturday</th>
        <th>Sunday</th>
        <th onClick={handler}>+</th>
      </tr>

      {props.children}
    </table>
  );
}

tablerow.js
import React from "react";
import "./styles.css";
export default function TableRow(props) {
  function del(e) {
    props.delete(e);
  }
  return (
    <tr id={props.id}>
      <td />
      <td />
      <td />
      <td />
      <td />
      <td />
      <td />
      <td />
      <td />
      <td />
      <td onClick={del}>-</td>
    </tr>
  );
}

Ответы [ 3 ]

1 голос
/ 01 июня 2019

splice изменяет исходный массив, вы не должны изменять состояние,

Вы можете изменить это 

deleteRow(event) {
    let arr = this.state.noOfRows;
    let id = event.target.parentNode.id;
    let filteredArray = arr.filter(val=> val !== id)
    this.setState({ noOfRows: filteredArray });
}
0 голосов
/ 01 июня 2019

Сплайсинг this.state.noOfRows массив мутирует свои элементы на месте.

В deleteRows, это устанавливает тот же массив, который теперь мутирует обратно в состояние компонента.

Вместо этого используйте Array.prototype.slice , чтобы получить фрагменты массива без элемента и создать из него новый массив. 

  deleteRow(event) {
    let arr = this.state.noOfRows;
    let id = event.target.parentNode.id;
    let ix = arr.findIndex(id);
    const noOfRows = [...arr.slice(0, ix), ...arr.slice(ix+1)] ;
    this.setState({ noOfRows });
  }
0 голосов
/ 01 июня 2019

Используйте indexOf вместо findIndex.Кроме того, всегда копируйте объекты, а не изменяйте их непосредственно в состояние.

Здесь работает Fiddle: https://stackblitz.com/edit/react-6hfnww

...