Reactjs 三元表达式不更新jsx模板

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

当一个列被用户删除时，在模式关闭之前，更改不会生效，因此在此之前，我希望UI反映出该列将通过删除行来删除。因此，我在

col.deleted

上有一个三元表达式，它显示了文本，如果为true，则为strike-through

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

<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.map（（col:any，i:number）=>(
{col.deleted？{col.text}:col.text}
{
col.deleted=！col.deleted；
设置列（列）；
}}
>
))}

我用按钮将

列[I]设置为
true
，但在UI中没有任何内容得到更新。我误解了什么吗

检查此沙盒以获取完整示例：
问题可能是您正在改变状态。尝试
让newColums=[…列]，然后执行相同的操作，但在newColumn上不执行columns，并在setState中设置newColumns
我最近在一个simper示例中遇到了同样的问题，最终我改变了状态，因此组件setState没有更新组件
编辑示例

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

您的函数应该看起来像这样，只要调整代码以防我输入错误

沙箱测试

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;


import React，{useState}来自“React”；
从“反应引导/按钮”导入按钮；
从“反应引导/模式”导入模式；
从“反应引导/表格”导入表格；
//@ts忽略
从“react-bootstrap-table2-editor”导入cellEditFactory；
//@ts忽略
从“react bootstrap table next”导入引导可选项；
从“react icons/fa”导入{FaTrash，FaEdit，FaPlus}；
从“/data”导入{行，列为cols}；
导入“react bootstrap table next/dist/react-bootstrap-table 2.min.css”；
导入“bootstrap/dist/css/bootstrap.min.css”；
导出接口列项{
数据字段：字符串；
文本：字符串；
删除：布尔值；
}
const EditTableModal=（道具：任意）=>{
const[columns，setColumns]=useState(
props.columns.map（（col:any）=>{
col.deleted=false；
返回列；
})
);
常量handleClick=i=>{
设newColumns=[]；
columns.forEach（column=>newColumns.push（Object.assign（{}，column））；
console.log（newColumns）；
控制台日志（i）；
newColumns[i]。已删除=！newColumns[i]。已删除；
console.log（newColumns[i].已删除）；
setColumns（newColumns）；
};
返回(
编辑列
{columns.map（（col:any，i:number）=>(
{col.deleted？{col.text}:col.text}
handleClick（i）}>
))}
拯救
关
);
};
常量组件列表=（）=>{
常量[列]=使用状态（cols）；
常量[数据]=使用状态（行）；
const[modalShow，setModalShow]=useState（false）；
返回(
{data.length>0(
setModalShow（真）}
className=“ml-1”
>
编辑表
setModalShow（假）}
背景={“静态”}
列={columns}
/>
) : (
表中没有数据
)}
);
};
导出默认组件列表；
我同意你的回答，但是展示一个更完整的正确方法可能会有帮助。我也尝试过，但是它似乎无法更改已删除的属性，如果你检查沙盒示例中的日志，它会保持不变。哦，我错过了你正在使用TS对象的事实，但问题是，国家完全发生了变异，我不知道你会如何克隆这些对象。因此，每次调用onclickI eddited my answer时，您可能都需要重新创建columns变量，它可以工作并更新组件Super-awesome！非常感谢！