如何将 this.state 转换为 React Hooks API 的索引

Question

我正在将反应组件从 class 转换为函数。我能够更改大部分代码，但是我在某一点上卡住了。特别是这个函数，其中 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] 转换为函数方法？

Answer 1

假设您的排序回调正在执行您希望它们执行的操作并且它们按照您发布的方式工作，您应该首先将 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;
};

然后您可以使用 setter:

更新 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:

中设置来更改这些属性的排序

const updateSorting = (sortedBy, direction) => {
  setSortBy(sortBy => {
    return { ...sortBy, [sortedBy]: direction };
  });
};

updateSorting('posts', 'desc');

Answer 2

感谢 answer and 评论，我找到了解决方案。以下是我如何相应地修改函数。

const sortRows = (rows, property, 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": ""
    });

如何将 this.state 转换为 React Hooks API 的索引

How to convert this.state with index for React Hooks API

function

reactjs

react-state-management

react-hooks