问题描述
我有一个反应表,我想删除或修改我的数据。 我的所有单元格的代码都在下面。
deleteTableElement = (row) => {
let data = this.state.list.data;
data.splice(row.id,1);
this.setState({
list:{
...this.state.list,data:data
}
})
};
actionsCell = (columns) => {
columns.push({
Header: "Accion",Cell: (props) => {
console.log(props);
return (
<div
style={{
display: "flex",justifyContent: "space-around",}}
>
<i
onClick={() => this.deleteTableElement(props.row)}
className="material-icons"
style={{ color: "red",cursor: "pointer" }}
>
delete
</i>
</div>
);
},});
return columns;
};
解决方法
每当您的组件意外没有更新时,那是因为您正在改变状态。几乎 100% 的时间:
let data = this.state.list.data;
data.splice(row.id,1); // <- splice mutates an array,mutating state is bad
this.setState({
list:{
...this.state.list,data:data
}
})
应该是:
this.setState({
list:{
...this.state.list,data:data.filter((d,i) => i !== row.id)
}
})
,
这是一个带有可删除行的表格的简单示例。
将初始行作为 prop 传递给组件并将它们复制到状态。
点击删除按钮,制作一个副本或没有删除行的行并更新状态。表格将重新呈现。
const {useState} = React;
const MyTable = ({rows,columns}) => {
const [data,setData] = useState(rows); // Copy rows to the state
const deleteRow = index => {
// Create a copy of row data without the current row
const newData = [...data.slice(0,index),...data.slice(index + 1)];
// Update state
setData(newData);
}
return (
<table cellSpacing="0" cellPadding="10">
<thead>
<tr>
{columns.map(column => (<th key={column}>{column}</th>))}
<th/>
</tr>
</thead>
<tbody>
{data.map((row,index) => (
<tr key={index}>
<td>{row.text}</td>
<td>{row.value}</td>
<td>
<button onClick={() => deleteRow(index)}>Delete Me !</button>
</td>
</tr>
))}
</tbody>
</table>
)
}
const tableRows = [
{
text: 'A',value: 100,},{
text: 'B',value: 200,{
text: 'C',value: 300,{
text: 'D',value: 400,];
const tableColumns = ['Text','Count'];
ReactDOM.render(
<MyTable rows={tableRows} columns={tableColumns} />,document.getElementById('container')
);
th,td {
border: 1px solid gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
<div id="container">
</div>
感谢@Adam 和@MichaelRovinsky,结果出来了,我的问题用函数切片解决了,组件状态应该用副本更新
let data = this.state.list.data;
data.splice(row.id,1);
const copy = data.slice();
this.setState({
list: {
...this.state.list,data: copy,});