javascript - 无法编译和工作 getColumnSearchProps 和表重置过滤器和排序器不起作用

Question

我正在尝试加载我的Exposures页面，但出现此错误：

./src/Exposures.js 第 58:9 行：“state”未定义 no-undef 第 63:9 行：“getColumnSearchProps”未定义 no-undef handleSearch1 未定义 no-undef handleReset1 未定义 no-undef 失败编译。

我正在尝试实现列搜索过滤器handleSearch1和搜索过滤器重置handleReset1，但它不起作用。

这是曝光代码：

import React, { useState } from 'react';
import 'antd/dist/antd.css';
import Highlighter from 'react-highlight-words';
import {EditOutlined, StockOutlined,SearchOutlined  } from "@ant-design/icons";
import { Table, PageHeader, Button, message,Input, Space } from 'antd';
import Axios from 'axios';
import moment from 'moment';

const Exposures = () => {
        
        const dataSource = [
          {
            id: '1',
            pwner: 'Mike',
            asOfDate: '2015/01/01',
            description: '22  Street',
          },
          {
            key: '2',
            name: 'John',
            asOfDate: '2015/06/01',
            description: '10 Downing Street',
          },
          {
            key: '3',
            name: 'paton',
            asOfDate: '2015/03/01',
            description: '234  Street',
          },
          {
            key: '4',
            name: 'molug',
            asOfDate: '2015/04/01',
            description: '1345  Street',
          },
        ];
        
        
        //start code to handle search
        state = {
            searchText: '',
            searchedColumn: '',
        };

   
         getColumnSearchProps = dataIndex => ({
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
            <div style={{ padding: 8 }}>
                <Input
                ref={node => {
                    this.searchInput = node;
                }}
                placeholder={`Search ${dataIndex}`}
                value={selectedKeys[0]}
                onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                onPressEnter={() => this.handleSearch1(selectedKeys, confirm, dataIndex)}
                style={{ width: 188, marginBottom: 8, display: 'block' }}
                />
                <Space>
                <Button
                    type="primary"
                    onClick={() => this.handleSearch1(selectedKeys, confirm, dataIndex)}
                    icon={<SearchOutlined />}
                    size="small"
                    style={{ width: 90 }}
                >
                    Search
                </Button>
                <Button onClick={() => this.handleReset1(clearFilters)} size="small" style={{ width: 90 }}>
                    Reset
                </Button>
                </Space>
            </div>
            ),
            filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
            onFilter: (value, record) =>
            record[dataIndex] ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) : '',
            onFilterDropdownVisibleChange: visible => {
            if (visible) {
                setTimeout(() => this.searchInput.select());
            }
            },
            render: text =>
            this.state.searchedColumn === dataIndex ? (
                <Highlighter
                highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                searchWords={[this.state.searchText]}
                autoEscape
                textToHighlight={text ? text.toString() : ''}
                />
            ) : (
                text
            ),
        });

        handleSearch1 = (selectedKeys, confirm, dataIndex) => {
            confirm();
            this.setState({
            searchText: selectedKeys[0],
            searchedColumn: dataIndex,
            });
        };

        handleReset1 = clearFilters => {
            clearFilters();
            this.setState({ searchText: '' });
        };
        
        //end code to handle search
  
    const columnDefinitions = [
        {
            title: 'Id',
            dataIndex: 'id'
        },
        {
            title: 'Owner',
            dataIndex: 'owner'
        },
        {
            title: 'AsOfDate',
            dataIndex: 'asOfDate',
            width: 15,
            render:(asOfDate)=>moment(asOfDate).format('YYYY-MM-DD')
        },
        {
            title: 'Description',
            dataIndex: 'description',
            width: 80,
            ...this.getColumnSearchProps('description') // not working
        }
    ];


    return (
        <React.Fragment>
            <PageHeader
                title={<span><StockOutlined /> <span>Historical Management</span></span>} 
            ></PageHeader>
            <Table
                size="middle"
                rowKey="id"
                bordered
                dataSource={dataSource}
                columns={columnDefinitions}
                pagination={{ pageSizeOptions: ['10', '20', '30'] }}
                loading={loading}
                scroll={{ x: 3000 }}
            />
    
        </React.Fragment>
    );
}

export default Exposures;

下面是我apps.js的文件，我在其中调用了该Exposures.js文件Route：

import React, { useState } from 'react';
import Exposures from './Exposures';
import { Layout, Menu, Col, Row, Typography } from 'antd';
import { Link, Switch, useLocation, Redirect, Route } from 'react-router-dom';
import './App.less';
import Logo from './RGB.png';


const { Text } = Typography;

const { Header, Content, Footer } = Layout;

const SubMenu = Menu.SubMenu;

const menuKeys =
{
    model: "definitions",
 
}


function App() {
    const [userName, setUserName] = useState();
    const location = useLocation();
    

    return (
            <Layout style={{ minHeight: "100%" }}>
                <Header className="header">
                    <Row justify="space-between">
                        <Col>
                            <Menu
                                selectedKeys={menuKeys[location.pathname.substring(1)]} theme="dark"  mode="horizontal">
                                <Menu.Item>
                                    <img alt="logo" src={Logo} style={{ "height": "61px" }} />
                                    <MenuItem  key="Exposures">
                                        <StockOutlined /><Link to="/exposurepage">page Exposures</Link>
                                    </MenuItem >
                                </SubMenu>
                            </Menu>
                        </Col>
                    </Row>
                </Header>
                <Content style={{ padding: '0 50px' }}>
                    <Switch>
                        <Route exact path="/exposurepage" ><Exposures /></Route>
                    </Switch>

                </Content>
                <Footer style={{ textAlign: 'center' }}>©2020</Footer>
            </Layout>
        );
}

export default App;

标签： javascriptreactjsreact-hooks

Answer 1

欢迎来到 SO :)

您似乎正在尝试在功能组件中实现状态。由于它是一个功能组件，它与类状态实现不同，因为您需要使用钩子，如下所示：

const [searchText, setSearchText] = useState('');
const [searchedColumn, setSearchedColumn] = useState('');

重要的是要记住：第一个值，例如 searchText，返回状态值。第二个值，setSearchText，它等价于 this.setState()，但它只处理 searchText 值:)

正确实施它将消除状态错误。

现在，要删除handleReset1错误和getColumnSearchProps（有关函数声明的错误），您必须将这些函数声明为 const，如下所示：

const handleSearch1 = (selectedKeys, confirm, dataIndex) => {
            confirm();
            this.setState({
            searchText: selectedKeys[0],
            searchedColumn: dataIndex,
            });
        };

const handleReset1 = clearFilters => {
            clearFilters();
            this.setState({ searchText: '' });
        };

它以这种方式工作是因为它是一个函数式组件，因此这些组件中的函数必须声明为变量。

之后，您将收到一些关于在功能组件中使用 this 的新错误，因此您只需要避免它（并更新您的 setState 调用以匹配钩子）。

查看 useState 钩子文档https://reactjs.org/docs/hooks-state.html 和组件文档https://reactjs.org/docs/components-and-props.html

快乐编码！:D