[英]How to splice an array within the state of a React Component
我正在制作時間表應用。 index.js呈現表。 表的行是從子數組讀取的。 children數組讀取狀態以保持自身更新。 AddRow()工作正常。 DeleteRow()有一些問題。 我打算從事件中獲取parentNode id,查找該狀態的數組,對其進行拼接,然后讓子級對其進行更新-這又將更新渲染。 因此,當刪除一行時,它將從狀態數組中進行拼接,然后在子數組中對其進行更新,並依次進行渲染。 DeleteRow運行除array.splice或indexOf部分以外的所有內容。 我什至嘗試了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>
);
}
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 });
}
使用indexOf
代替findIndex
。 此外,始終復制對象,而不是將其直接突變為狀態。
這是正在工作的小提琴: https : //stackblitz.com/edit/react-6hfnww
拼接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 });
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.