无法针对对象数组设置状态：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 上立即执行，并且根据您构建的逻辑，这将导致 "Maximum update depth exceeded" 错误。

传递一个将调用您的 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) => {

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

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

Not able to setstate with respect to array of objects: React JS

javascript

setstate

typescript

ecmascript-6

reactjs