javascript - 无法针对对象数组设置状态 : 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