ant design 中的意外 useState 行为 table

Question

我有 ant design 表单和 table 并排，当我填写表单数据并单击 add entity button 时，数据应该显示在 table 中。现在当我点击添加实体时数据确实得到呈现但是当我填写表格并点击添加实体按钮时以前的数据消失了，现在我知道我需要复制以前的数据而且我也这样做了但它不工作。

我的问题：- 添加新表单数据时，table 中呈现的先前表单状态值会消失

我的查询:- 我应该如何以及在何处使用扩展运算符复制先前的对象，以便它不会被重置。

我的密码是

import { Card, Table } from "antd";
import { Form, Input, Button, Select, Space, AutoComplete } from "antd";
import { DeleteOutlined, PlusOutlined, SendOutlined } from "@ant-design/icons";
import { useState } from "react";


const ExampleComponent = (props) => {
  // Destructuring props
  const { intent_data, entity_data } = props;
  
  const [dataSource, setDataSource] = useState([{}]);
  // To handle the disable state of Select Entity Select DropDown
  const [addentity,setAddEntity] = useState(false)
  // Handler function passed to YES/NO Select Option
  const addEntityHandler = (addEntity) => {
    if(addEntity === 'no'){
      setAddEntity(true)
    }else{
      setAddEntity(false)
    }
  }
  
  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log(values);
    form.resetFields();
    const dataArr = [];
    // Push values to array since dataSource takes array not an object
    dataArr.push(values);
    setDataSource(dataArr);
  };
  const columns = [
    {
      title: "Entity",
      dataIndex: "entity_name",
      key: "entity_name",
    },
    {
      title: "Entity Value",
      dataIndex: "entity_value",
      key: "entity_value",
    },
    {
      title: "Operation",
      key: "operation",
      render: (record: any) => (
        <DeleteOutlined
          style={{ color: "red" }}
          onClick={() => console.log(record)}
        />
      ),
    },
  ];
  return (
    <Card className="csi-project-card-0934">
      <div className="example-layout">
        <div style={{ flexBasis: "100%" }}>
          <Form
            form={form}
            labelCol={{ span: 7 }}
            wrapperCol={{ span: 10 }}
            layout="horizontal"
            colon={true}
            onFinish={onFinish}
            size="large"
          >
            {/* <h4>Create Example</h4> */}
            <Form.Item
              label="Select Intent"
              name="intent_name"
              className="csi-ant-form-item"
              rules={[{ required: true, message: "Intent Cannot be Empty!" }]}
            >
              <Select>
                {/* {intent_data?.map?.((value) => (
                  <Select.Option
                    key={value.intent_ID}
                    value={value.intent_name}
                  >
                    {value.intent_name}
                  </Select.Option>
                ))} */}
                <Select.Option value="intent demo">Intent Demo</Select.Option>
                <Select.Option value="intent test">Intent Test</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="Enter Example"
              name="example_name"
              className="csi-ant-form-item"
              hasFeedback
              rules={[
                { required: true, message: "This Field Cannot be Empty!" },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (value.length < 4) {
                      return Promise.reject("Length too short");
                    }
                    return Promise.resolve();
                  },
                }),
              ]}
            >
              <AutoComplete>
                <Input allowClear/>
              </AutoComplete>
            </Form.Item>
            <Form.Item
              label="Do you want to add Entity"
              name="add_entity"
              className="csi-ant-form-item"
              rules={[{ required: true, message: "This Cannot be Empty!" }]}
            >
              <Select placeholder="SELECT" onSelect={(addEntity) => addEntityHandler(addEntity)}>
                <Select.Option value="yes">YES</Select.Option>
                <Select.Option value="no">NO</Select.Option>
              </Select>
            </Form.Item>

            <Form.Item
              label="Select Entity"
              name="entity_name"
              className="csi-ant-form-item"
            >
              <Select disabled = {addentity}>
                <Select.Option value="entity demo">Entity Demo</Select.Option>
                <Select.Option value="entity test">Entity Test</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="Select Value"
              name="entity_value"
              className="csi-ant-form-item"
              hasFeedback
              rules={[
                { required: true, message: "This Field Cannot be Empty!" },
              ]}
            >
              <AutoComplete>
                <Input placeholder="Select Value from Example" />
              </AutoComplete>
            </Form.Item>

            <Form.Item className="csi-ant-form-item">
              <Button
                key="submit"
                type="primary"
                htmlType="submit"
                shape="round"
              >
                Add Entity <PlusOutlined />
              </Button>
            </Form.Item>
          </Form>
        </div>
        <div
          style={{
            flexBasis: "100%",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
          }}
        >
          <Table
            bordered
            className="ib-table"
            dataSource={dataSource}
            columns={columns}
            pagination={{ pageSize: 6 }}
            rowKey={Math.random().toString()}
          />
          <Button key="submit" type="primary" htmlType="submit" shape="round">
            Submit <SendOutlined />
          </Button>
        </div>
      </div>
    </Card>
  );
};
export default ExampleComponent;

表单数据存储在values对象中，values的结构是

{
add_entity: "yes"
entity_name: "entity demo"
entity_value: "Test"
example_name: "Test"
intent_name: "intent demo"
}

这里需要注意的一点是dataSource状态变量是对象数组，比如

[{
add_entity: "yes"
entity_name: "entity demo"
entity_value: "Test"
example_name: "Test"
intent_name: "intent demo"
}]

我的预期输出低于

Entity	Entity Value	Operation
entity demo	test	delete icon
intent demo	test	delete icon

Answer 1

如果你尝试

setDataSource(prevDataSource => [...prevDataSource, values]);

?

同理，删除一个项目：

{
      title: "Operation",
      key: "operation",
      render: (record) => (
        <DeleteOutlined
          style={{ color: "red" }}
          onClick={() => {
            setDataSource(prevDataSource => prevDataSource.filter(item => item.entity_name !== record.entity_name //entity_name or whatever id the item has ))
          }}
        />
      ),
    },

顺便说一句，如果您使用打字稿，请尽量避免使用 any。方法如下：

import { Table } from 'antd';
import { ColumnsType } from 'antd/es/table';

interface User {
  key: number;
  name: string;
}

const columns: ColumnsType<User> = [
  {
    key: 'name',
    title: 'Name',
    dataIndex: 'name',
  },
];

const data: User[] = [
  {
    key: 0,
    name: 'Jack',
  },
];

export default () => (
  <>
    <Table<User> columns={columns} dataSource={data} />
    /* JSX style usage */
    <Table<User> dataSource={data}>
      <Table.Column<User> key="name" title="Name" dataIndex="name" />
    </Table>
  </>
);

ant design 中的意外 useState 行为 table

Unexpected useState behaviour in ant design table

reactjs

antd