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

Question

I am trying to map few fields in array of objects, here in this case it is fieldnames and sort order.

I am trying to achieve server side sorting functionality where in the server takes the field name and sort type whenever I click on a field. I just need to map the field names with the sort type(ASCENDING or DESCENDING) .

I have written a sample where I am maintaining a sample array of objects with type. And on click of that column need I need to decide its sorting order

Can someone help here , Just need to achieve the tagging of sort order with the field name

Sandbox: 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

Your click-handlers get executed immediately on render and with the logic you have constructed this will cause the "Maximum update depth exceeded" error.

Pass an anonymous function that will call your sortHandler instead. This will make it so the sortHandler only gets executed when the user clicks the span:

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

See sandbox for example on how to sort by fieldnames: 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); 

Few Highlighted issue on your code, please do not import the code if you're not using which can consume memory.

Arrow function dedicated to using the function on the scope. Please check the scope of the variable if the variable required bind with scope

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

Please make sure the calling function also requires the scope this to the function. I hope your problem is solved by the initial solution. its just additional notes