三元表达式不更新jsx模板

Question

我使用react-bootstrap-table-2来构建一个表，希望用户能够在其中更改模式UI中的列。

当用户删除列时，在关闭模态之前，更改不应生效，因此在此之前，我希望UI反映该列将通过删除行来删除。所以我在col.deleted上有一个三元表达式，它显示了带有strike-through if true的文本。

我在列数组上进行映射，为每列创建新行，并使用一个按钮删除获取列索引的列。

<tbody>
{columns.map((col: any, i: number) => (
<tr key={i}>
<td>{col.deleted ? <del>{col.text}</del> : col.text}</td>
<td className="w-20">
<div className="flex flex-row justify-center">
<Button
variant="danger"
onClick={() => {
col.deleted = !col.deleted;
setColumns(columns);
}}
>
<FaTrash />
</Button>
</div>
</td>
</tr>
))}
</tbody>

我用按钮将columns[i].deleted设置为true，但UI中没有任何更新。我误解什么了吗？

查看此沙盒以获取完整示例：https://codesandbox.io/s/silly-wilbur-q3ytt

Answer 1

问题可能是您正在更改状态。尝试let newColums = [...columns];，然后执行相同的操作，但在newColumn而不是列上，并在setState中设置newColumns
我最近用一个简单的例子遇到了同样的问题，结果是我正在改变状态，因此组件setState没有更新组件编辑示例

// Your onClick function
(i) => {
let newColumns = [...columns];
newColumns[i].deleted = !newColumns[i].deleted;
setState(newColumns);
}

您的函数应该看起来有点像这样，只需调整代码，以防我输入错误
测试过的Sandbox

import React, { useState } from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";
import Table from "react-bootstrap/Table";
// @ts-ignore
import cellEditFactory from "react-bootstrap-table2-editor";
// @ts-ignore
import BootstrapTable from "react-bootstrap-table-next";
import { FaTrash, FaEdit, FaPlus } from "react-icons/fa";
import { rows, columns as cols } from "./data";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
import "bootstrap/dist/css/bootstrap.min.css";
export interface ColumnItem {
dataField: string;
text: string;
deleted: boolean;
}
const EditTableModal = (props: any) => {
const [columns, setColumns] = useState<ColumnItem[]>(
props.columns.map((col: any) => {
col.deleted = false;
return col;
})
);
const handleClick = i => {
let newColumns = [];
columns.forEach(column => newColumns.push(Object.assign({}, column)));
console.log(newColumns);
console.log(i);
newColumns[i].deleted = !newColumns[i].deleted;
console.log(newColumns[i].deleted);
setColumns(newColumns);
};
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
<div className="flex flex-row items-center">
<FaEdit className="mr-2" /> Edit columns
</div>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Table striped bordered hover size="sm" className="mb-0">
<tbody>
{columns.map((col: any, i: number) => (
<tr key={i}>
<td>{col.deleted ? <del>{col.text}</del> : col.text}</td>
<td className="w-20">
<div className="flex flex-row justify-center">
<Button variant="danger" onClick={() => handleClick(i)}>
<FaTrash />
</Button>
</div>
</td>
</tr>
))}
<tr>
<td>
<div>
<Button variant="dark">
<FaPlus />
</Button>
</div>
</td>
<td className="w-20" />
</tr>
</tbody>
</Table>
</Modal.Body>
<Modal.Footer>
<Button variant="dark" onClick={props.onHide}>
Save
</Button>
<Button variant="light" onClick={props.onHide}>
Close
</Button>
</Modal.Footer>
</Modal>
);
};
const ComponentList = () => {
const [columns] = useState<ColumnItem[]>(cols);
const [data] = useState<any[]>(rows);
const [modalShow, setModalShow] = useState(false);
return (
<div className="flex flex-col items-center m-3">
{data.length > 0 ? (
<div className="flex flex-col items-center">
<div className="flex flex-row m-2">
<Button
variant="dark"
onClick={() => setModalShow(true)}
className="ml-1"
>
<div className="flex flex-row items-center">
<FaEdit className="mr-2" /> Edit table
</div>
</Button>
<EditTableModal
show={modalShow}
onHide={() => setModalShow(false)}
backdrop={"static"}
columns={columns}
/>
</div>
<BootstrapTable
keyField="idInternal"
data={data}
columns={columns}
cellEdit={cellEditFactory({
mode: "click",
blurToSave: true,
autoSelectText: true
})}
/>
</div>
) : (
<div className="font-mono text-sm">No data in table</div>
)}
</div>
);
};
export default ComponentList;