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

【问题标题】：How to convert this.state with index for React Hooks API如何使用 React Hooks API 的索引转换 this.state
【发布时间】：2020-11-10 13:12:02
【问题描述】：

我正在将 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] 转换为函数方法？

【问题讨论】：

通过快速扫描，我认为您需要重构它，以便 sortBy 成为排序列的数组，即 let [sortBy, setSortBy] = useState([]); 和 const sortRows = (rows, property, sortByIndex) => { if (sortBy[sortByIndex] === 'asc'){ //... } }。您可以这样设置状态，setSortByIndex = (index, direction) => setSortBy([...sortBy, index: direction ])（其中direction 是'asc' 或'desc'）
我已经尝试了第一部分。它不会触发任何错误，但不会对列进行排序。我应该如何使用代码的第二部分（setSortByIndex）？
目前如何设置 sortBy 列索引？另外，什么时候调用sortRows？

标签： reactjs function react-hooks react-state-management

【解决方案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');

【讨论】：

sortRows 会在哪里调用？
当您需要获取行以进行渲染/使用时。
我尝试在sortRows 函数中调用updateSorting，但它触发了Too many re-renders 错误。但是，如果我输入 sortBy[sortedBy] = 'asc'; 排序工作。
我发布了一个答案。我不知道调用sortBy[sortedBy] = 'asc'; 是否是改变对象状态的最佳方法

【解决方案2】：

感谢diogo.silva 的回答和nbokmans 的评论，我能够找到解决方案。以下是我如何相应地修改函数。

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": ""
    });

【讨论】：