Ant Design Table 组件不显示基于状态的数据源更改答案

【问题标题】：Ant Design Table component not displaying state-based dataSource changeAnt Design Table 组件不显示基于状态的数据源更改
【发布时间】：2020-11-14 06:01:49
【问题描述】：

我在我的 React 项目中使用 Ant Design，但我在使用 Table 组件时遇到了问题。我有一个任务列表，我根据表单内容添加一个新任务 - 目前只是通过添加到对象数组（代码 sn-ps 中的taskListMock），应用程序未链接到任何后端。表单工作正常，但是，即使表的 dataSource 属性直接从状态获取其内容并且状态更新正确 - 由日志记录和开发工具确认，表也不会刷新。奇怪的是，当我启动实施的排序时，表格会刷新新任务，所以我怀疑表格不会以某种方式从状态更改中刷新其内容，仅在 onChange 钩子或其他东西上，但我感觉有点死胡同 - 任何帮助将不胜感激，因为我计划在其他表中使用类似的功能。

结构非常简单，我有一个TasksIndex.js，其中表作为TaskListTable.js 中的一个单独组件

TaskListTable.js：

const TaskListTable = (props) => {
  const { t } = useTranslation();

  const [tableContent, setTableContent] = useState(props.tasks);

  return (
    <React.Fragment>
      <Table
        pagination={false}
        dataSource={tableContent}
        columns={[
          {
            title: t("tasks.name"),

            key: "name",
            render: (text) => {
              return <p>{text.slug}</p>;
            },
          },
          {
            title: t("tasks.dateDue"),
            dataIndex: "dateDue",
            key: "dateDue",
            sorter: (a, b) =>
              new Date(a.dateDue).getTime() - new Date(b.dateDue).getTime(),
            render: (dateDue) => {
              let dateFormatted = moment(dateDue);
              return <>{dateFormatted.format("LL")}</>;
            },
            defaultSortOrder: "ascend",
          },
          {
            title: t("tasks.priority"),
            key: "priority",
            dataIndex: "priority",
            render: (priority) => (
              <React.Fragment>
                {priority === "low" ? (
                  <Tag color="geekblue">{t("tasks.lowPriority")}</Tag>
                ) : (
                  ""
                )}
                {priority === "normal" ? (
                  <Tag color="green">{t("tasks.normalPriority")}</Tag>
                ) : (
                  ""
                )}
                {priority === "high" ? (
                  <Tag color="volcano">{t("tasks.highPriority")}</Tag>
                ) : (
                  ""
                )}
              </React.Fragment>
            ),
            sorter: (a, b) => {
              const priorityOrder = ["low", "normal", "high"];

              return (
                priorityOrder.indexOf(a.priority) -
                priorityOrder.indexOf(b.priority)
              );
            },
          },
          {
            title: t("tasks.options"),
            key: "options",
            render: (item) => {
              return (
                <Checkbox value={item.id}>{t("tasks.setCompleted")}</Checkbox>
              );
            },
          },
        ]}
      ></Table>
    </React.Fragment>
  );
};

export default TaskListTable;

TaskIndex.js：

const TasksIndex = () => {
  const [isModalOpen, setModalOpen] = useState(false);
  const [taskList, updateTaskList] = useState(taskListMock);

  const [form] = Form.useForm();

  const addTask = useCallback(
    (values) => {
      const newTaskList = taskList;

      newTaskList.push({
        id: taskList[taskList.length - 1] + 1,
        slug: values.name,
        description: values.description,
        dateDue: values.dateDue.format("YYYY-MM-DD"),
        priority: values.priority,
        checked: false,
      });
      form.resetFields();
      updateTaskList(newTaskList);
      closeModal();
    },
    [taskList, form]
  );

  const openModal = () => {
    setModalOpen(true);
  };

  const closeModal = () => {
    setModalOpen(false);
  };

  const { t } = useTranslation();

  return (
    <React.Fragment>
      <Title>{t("tasks.tasksOverviewHeader")}</Title>
      <Row gutter={[16, 24]}>
        <Col className="gutter-row" span={24}>
          <TaskListTable tasks={taskList}></TaskListTable>
        </Col>
      </Row>
... 
...

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

我终于修复了它 - 与使用扩展运算符不同，似乎创建一个新数组并将新任务推送到它不被视为状态更改（或者可能是表更改触发器）。工作代码如下所示：

const addTask = (values) => {
    const newTask = {
      id: taskList[taskList.length - 1] + 1,
      slug: values.name,
      description: values.description,
      dateDue: values.dateDue.format("YYYY-MM-DD"),
      priority: values.priority,
      checked: false,
    };
    updateTaskList([...taskList, newTask]);
    closeModal();
    form.resetFields();
  };

【讨论】：