即使在控制台上可见，数据也不会出现在界面中

Question

我有一个弹出窗口，当我按下按钮时，弹出窗口会打开，

在弹出窗口中，我有两张相邻的桌子，

第一个表包含数据，右表中每行包含三列，最后一列是“移动”按钮。

当您按下移动按钮时，该行从右表移动到左表，

但是问题是正在传输的数据没有出现在左表中。当我单击“检查”时，数据显示在控制台上，但在界面中不可见。我不知道问题的解决办法。

编辑

我解决了我的问题，问题出自这一行：

<div className="d-flex"> 

我删除了 d-flex，我的问题解决了，但我又出现了另一个问题，那就是桌子在彼此下面，我需要它们彼此相邻。

import React, { useState } from "react";
import { Modal, ModalHeader, ModalBody, Table, Button } from "reactstrap";

const Popup = ({ procedureCatergory, isOpen, toggle }) => {
  const [rightTableData, setRightTableData] = useState([...procedureCatergory]);
  const [leftTableData, setLeftTableData] = useState([]);

  const moveToLeftTable = (item) => {
    setRightTableData((prevRightTableData) =>
      prevRightTableData.filter((data) => data.value !== item.value)
    );
    setLeftTableData((prevLeftTableData) => [...prevLeftTableData, item]);
  };

  const moveToRightTable = (item) => {
    setLeftTableData((prevLeftTableData) =>
      prevLeftTableData.filter((data) => data.value !== item.value)
    );
    setRightTableData((prevRightTableData) => [...prevRightTableData, item]);
  };

  return (
    <Modal isOpen={isOpen} toggle={toggle}>
      <ModalHeader>Popup</ModalHeader>
      <ModalBody>
        <div>
          <Table>
            <thead>
              <tr>
                <th>
                  #
                </th>
                <th>Name</th>
                <th>action</th>
              </tr>
            </thead>
            <tbody>
              {rightTableData.map((item) => (
                <tr key={item.value}>
                  <th scope="row">
                    {item.value}
                  </th>
                  <td>{item.label}</td>
                  <td>
                    <Button onClick={() => moveToLeftTable(item)}>Move</Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </Table>
          {/* </div>

        <div className="d-flex"> */}
          <Table>
            <thead>
              <tr>
                <th>
                  #
                </th>
                <th>Name</th>
                <th>action</th>
              </tr>
            </thead>
            <tbody>
              {leftTableData.map((item) => (
                <tr key={item.value}>
                  <th scope="row">
                    {item.value}
                  </th>
                  <td>{item.label}</td>
                  <td><Button onClick={() => moveToRightTable(item)}>Move</Button></td>
                </tr>
              ))}
            </tbody>
          </Table>
        </div>
      </ModalBody>
    </Modal>
  );
};

export default Popup;

Answer 1

考虑到状态更新有点慢，两个 tr 的 key 可能是相同的，因此，react 不会向 dom 添加新元素并将其视为现有元素。您可能想调试您的函数和状态以检查它们是否正确更新。