无法设置对象数组的状态：React JS

Question

我正在尝试映射对象数组中的几个字段，在本例中是字段名和排序顺序。

我正在尝试实现服务器端排序功能，只要我单击一个字段，服务器就会获取字段名称和排序类型。我只需要用排序类型（升序或降序）映射字段名称。

我已经编写了一个示例，我在其中维护了一个具有类型的对象的示例数组。单击该列时，我需要确定其排序顺序

这里有人可以帮忙吗，只需要用字段名实现排序顺序的标记

沙盒：https://codesandbox.io/s/hopeful-wescoff-08x8x

import React from "react";
import ReactDOM from "react-dom";
import { render } from "react-dom";

interface IState {
  sorting: any;
}
interface IProps {}

export default class App extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      sorting: [{ firstName: "" }, { lastName: "" }]
    };
  }

  sortHandler = name => {
    const sorting = Object.keys(this.state.sorting).reduce((obj, key) => {
      if (key === name) {
        obj[key] = this.state.sorting[key] === "ASC" ? "DESC" : "ASC";
      } else {
        obj[key] = "";
      }
      return obj;
    }, {});

    this.setState({ sorting }, () => console.log(this.state.sorting));
  };

  render() {
    return (
      <div>
        <span onclick={this.sortHandler("firstName")}> FirstName</span>
        <span onclick={this.sortHandler("lastName")}> LastName</span>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

您的点击处理程序会立即在 render 上执行，并且根据您构建的逻辑，这将导致 “超出最大更新深度” 错误。

传递一个匿名函数，该函数将调用您的sortHandler。这将使sortHandler 仅在用户单击跨度时才会执行：

  render() {
    return (
      <div>
        <span onclick={() => this.sortHandler("firstName")}> FirstName</span>
        <span onclick={() => this.sortHandler("lastName")}> LastName</span>
      </div>
    );
  }

请参阅沙盒，了解如何按字段名排序：https://codesandbox.io/s/vigilant-haslett-c2z3f

Answer 2

import React from "react";
import ReactDOM from "react-dom";
//import { render } from "react-dom";

interface IState {
  sorting: any;
}
interface IProps {}

export default class App extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      sorting: [{ firstName: "" }, { lastName: "" }]
    };
  }

  sortHandler = (name => {
    const sorting = Object.keys(this.state.sorting).reduce((obj, key) => {
      if (key === name) {
        obj[key] = this.state.sorting[key] === "ASC" ? "DESC" : "ASC";
      } else {
        obj[key] = "";
      }
      return obj;
    }, {});

    this.setState({ sorting }, () => console.log(this.state.sorting));
  });

  render() {
    return (
      <div>
        <span onclick={() => this.sortHandler("firstName")}> FirstName</span>
        <span onclick={() => this.sortHandler("lastName")}> LastName</span>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

您的代码中很少有突出显示的问题，如果您不使用会消耗内存的代码，请不要导入代码。

箭头函数专用于使用作用域上的函数。 如果需要的变量与范围绑定，请检查变量的范围

    const sorting = Object.keys(this.state.sorting).reduce((obj, key) => {

请确保调用函数也需要该函数的作用域。我希望您的问题通过最初的解决方案得到解决。它只是附加说明