美文网首页
useState问题 多个闭包

useState问题 多个闭包

作者: 大乔是个美少女 | 来源:发表于2020-12-22 10:39 被阅读0次
    import React, { useEffect, useState } from "react";
    import ReactDOM from "react-dom";
    import "antd/dist/antd.css";
    import { Table, Button } from "antd";
    
    function MyComponent() {
      const [data, setData] = useState([]);
    
      const [columns] = useState(genColumns());
      const columns2 = genColumns();
    
      function genColumns() {
        return [
          {
            title: "Name",
            dataIndex: "name",
            key: "name"
          },
          {
            title: "Action",
            key: "action",
            render: (text, record) => (
              <Button
                type="primary"
                onClick={() => {
                  console.log(record, data);
                }}
              >
                Delete
              </Button>
            )
          }
        ];
      }
    
      // 100ms 获取数据
      useEffect(() => {
        setTimeout(() => {
          setData([
            {
              key: "1",
              name: "张三"
            }
          ]);
        }, 100);
      }, []);
    
      return (
        <div>
          <p>表格1---------</p>
          <Table
            columns={columns}
            size="small"
            pagination={false}
            dataSource={data}
          />
    
          <br />
    
          <p>表格2---------</p>
          <Table
            columns={columns2}
            size="small"
            pagination={false}
            dataSource={data}
          />
        </div>
      );
    }
    
    ReactDOM.render(<MyComponent />, document.getElementById("container"));
    
    

    相关文章

      网友评论

          本文标题:useState问题 多个闭包

          本文链接:https://www.haomeiwen.com/subject/scojnktx.html