Javascript 将antd表数据转换为挂钩

这里是React初学者，我目前正在学习React JS，因为大家都说React钩子更容易开始，所以我从钩子开始，但所有地方都主要是用类进行React，在这个示例（antd表）中，它是用类编码的，如果我现在已经理解了，我应该将“searchText:”，searchedColumn:”，放入useState中，不需要使用效果？因为没有组件安装或udpate？为了学习，我想把这个类代码改成钩子，很抱歉出错，因为英语不是我的母语：

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“./index.css”；
从“antd”导入{表、输入、按钮、空格}；
从“react highlight words”导入荧光灯；
从“@ant design/icons”导入{SearchOutlined}”；
常数数据=[
{
键：“1”，
姓名：“约翰·布朗”，
年龄:32岁，
地址：“纽约第一湖公园”，
},
{
键：“2”，
姓名：“乔·布莱克”，
年龄:42,，
地址：“伦敦第一湖公园”，
},
{
键：“3”，
姓名：“吉姆·格林”，
年龄:32岁，
地址：“悉尼第一湖公园”，
},
{
键：“4”，
名字：“吉姆·瑞德”，
年龄:32岁，
地址：“伦敦第二湖公园”，
},
];
类应用程序扩展了React.Component{
状态={
搜索文本：“”，
searchedColumn:“”，
};
getColumnSearchProps=dataIndex=>({
filterDropdown:（{setSelectedKeys，selectedKeys，confirm，clearFilters}）=>(
{
this.searchInput=节点；
}}
占位符={`Search${dataIndex}`}
值={selectedKeys[0]}
onChange={e=>setSelectedKeys（e.target.value？[e.target.value]：[]）一节）
onPressEnter={（）=>this.handleSearch（selectedKeys，confirm，dataIndex）}
样式={{width:188，marginBottom:8，显示：'block'}
/>
this.handleSearch（selectedKeys、confirm、dataIndex）}
图标={}
size=“小”
样式={{宽度：90}
>
搜寻
this.handleReset（clearFilters）}size=“small”style={{{width:90}>
重置
{
确认（{closeDropdown:false}）；
这是我的国家({
searchText:selectedKeys[0]，
searchedColumn:dataIndex，
});
}}
>
滤器
),
filterIcon:filtered=>，
onFilter：（值，记录）=>
记录[数据索引]
？记录[dataIndex].toString（）.toLowerCase（）.includes（值.toLowerCase（））
: '',
onFilterDropdownVisibleChange:visible=>{
如果（可见）{
setTimeout（（）=>this.searchInput.select（），100）；
}
},
呈现：文本=>
this.state.searchedColumn===数据索引(
) : (
文本
),
});
handleSearch=（选择键、确认键、数据索引）=>{
确认（）；
这是我的国家({
searchText:selectedKeys[0]，
searchedColumn:dataIndex，
});
};
handleReset=clearFilters=>{
clearFilters（）；
this.setState（{searchText:'}）；
};
render（）{
常量列=[
{
标题：“姓名”，
数据索引：“名称”，
关键字：“名称”，
宽度：“30%”，
…this.getColumnSearchProps（'name'），
},
{
标题:"年龄",，
数据索引：“年龄”，
关键词：“年龄”，
宽度：“20%”，
…此.getColumnSearchProps（'age'），
},
{
标题：“地址”，
dataIndex:'地址'，
关键字：'地址'，
…此.getColumnSearchProps（'address'），
},
];
返回；
}
}
ReactDOM.render（，document.getElementById（'container'））

是，

searchText

和

searchedColumn

是状态，应该用

useState

声明，如下所示：

const [searchText, updateSearchText] = useState('default_state');
const [searchedColumn, updateSearchedColumn] = useState('default_state');

updateSearchText（某些值）

与

this.setState({
searchText : some_value
})

---

而且，

updateSearchedColumn

与上面所说的相同，但是对于状态：

searchedColumn

这很好，我走的是正确的道路，你能不能更正代码并编写工作代码，这样每个人都可以学习，因为没有任何版本的antd表？嘿@waleedd32，这里不是这样的。但让我给你一个建议：如果你熟悉React类，那么就使用React类，而不是函数组件和挂钩……）除了这里的

render（）

之外，我没有看到任何生命周期方法，因此不，我认为您不需要在这里的任何地方使用

useffect

。如果您有类似于

componentDidMount（）

的东西，那么其中的一些代码将进入

useffect（）

钩子。最后，是的，您应该为

searchText

和

searchColumn

@andromeda使用useState（）钩子，您是否可以编写工作代码，以便每个人都可以学习，因为没有任何版本的antd表？