如何使用React Hooks API的索引转换this.state

如何解决如何使用React Hooks API的索引转换this.state

我正在将React组件从类转换为函数。我能够更改大多数代码，但是我一度陷入困境。特别是this.state具有 index ：

的此函数

const sortRows = (rows,property,sortBy) => {
        if (this.state[sortBy] === 'asc'){
            rows.sort(function(a,b){
                if (a[property] !== null && b[property] !== null){
                return a[property].localeCompare(b[property]);}
            })
        }
        if (this.state[sortBy] === 'desc'){
            rows.sort(function(a,b){
                if (a[property] !== null && b[property] !== null){
                return b[property].localeCompare(a[property]);}
            })
        }
        return rows
    }

上面的函数被这样调用：

rows = sortRows(rows,"field_firstname","sortFirstName");

sortFirstName是另一个状态变量。

如何将this.state[sortBy]转换为函数方法？

解决方法

假设排序回调正在执行您希望它们执行的操作，并且它们在您将其发布后可以正常工作，则应首先将MainMsg* mainMsg = main_msg__unpack(nullptr,BUFFERLEN,BUFFER); if (! mainMsg) { // error return; } SubMsg **subMsgs = mainMsg->msgs; ... 定义为状态变量：

sortBy

然后让您的const [sortBy,setSortBy] = useState('asc'); // set here your default 函数使用该状态变量的值。

sortRows

然后可以使用设置器更新const sortRows = (rows,property) => { if (sortBy === 'asc'){ rows.sort(function(a,b){ if (a[property] !== null && b[property] !== null) { return a[property].localeCompare(b[property]); } }); } else if (sortBy === 'desc'){ rows.sort(function(a,b){ if (a[property] !== null && b[property] !== null) { return b[property].localeCompare(a[property]); } }); } return rows; }; 状态变量的值：

sortBy

---

如果您的setSortBy('asc'); setSortBy('desc'); 实际上是用于对多个不同的实体进行排序，则适用以下条件：

sortBy

const [sortBy,setSortBy] = useState({}); // set default as empty

您可以通过在const sortRows = (rows,property,sortedBy) => { if (!sortBy[sortedBy] || sortBy[sortedBy] === 'asc') { // this is the default rows.sort(function(a,b){ if (a[property] !== null && b[property] !== null) { return a[property].localeCompare(b[property]); } }); } else if (sortBy[sortedBy] === 'desc'){ rows.sort(function(a,b){ if (a[property] !== null && b[property] !== null) { return b[property].localeCompare(a[property]); } }); } return rows; }; 中进行设置来更改这些属性的排序：

sortBy

,

感谢diogo.silva的回答和nbokmans的评论，我找到了解决方案。这是我如何相应地修改功能的方法。

const sortRows = (rows,sortedBy) => {
        if (sortBy[sortedBy] === 'asc' || sortBy[sortedBy] === ''){
            sortBy[sortedBy] = 'desc';
            rows.sort(function(a,b){
                if (a[property] !== null && b[property] !== null){
                return a[property].localeCompare(b[property]);}
            });
        } else if (sortBy[sortedBy] === 'desc'){
            sortBy[sortedBy] = 'asc';
            rows.sort(function(a,b){
                if (a[property] !== null && b[property] !== null){
                return b[property].localeCompare(a[property]);}
            });
        }
        return rows
    }

sortBy状态的定义如下：

let [sortBy,setSortBy] = useState({
        "sortFirstName": "","sortLastName": "","sortStatus": ""
    });