reactjs - Varför fungerade inte setState i det här fallet i NextJS?

Hej allihopa!
Jag har ett problem - setState fungerar inte i min NextJS + TS-applikation.
Jag försökte med mitt state genom ReactHooks, men ingenting fungerade, jag ändrade komponenten till en klass, men ingenting fungerade.
Jag försökte köra denna komponent i en ny skapad CRA-applikation utan TS. Allt fungerade där.

Komponenten tar emot arrayen via props och renderar den som knappar.
State innehåller två egenskaper, currentActive och selected.
När användaren klickar på knappen utlöses den första funktionen som ska uppdatera this.state.currentActive
sedan den andra som ska uppdatera this.state.selected

I this.setState-funktionen kallar jag en callback, som ska skriva ut till konsolen att state har uppdaterats. Men inget skrivs ut, det ser ut som om this.setState inte kallas!

import React, { Component } from 'react';

import { SelectFieldComp } from './styles';

interface IProps {
  title: string;
  name: string;
  options: {
    id: number;
    text: string;
    active: boolean;
  }[];
  multiple?: boolean;
  setFieldValue?: any;
}

interface IState {
  currentActive: number[];
  selected: string[];
}

class SelectField extends Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      currentActive: [],
      selected: []
    };
  }

  updateCurrentActive = id => {
    const { multiple } = this.props;
    const { currentActive } = this.state;
    const newCurrentActive: number[] = multiple
      ? Object.assign([], currentActive)
      : [];

    if (multiple && newCurrentActive.indexOf(id) > 0) {
      newCurrentActive.splice(newCurrentActive.indexOf(id), 1);
    } else {
      newCurrentActive.push(id);
    }

    this.setState(
      () => ({ currentActive: newCurrentActive }),
      () => {
        console.log('update state in updateCurrentActive: ', this.state);
      }
    );
  };

  updateSelected = () => {
    const { currentActive } = this.state;
    const { options } = this.props;
    const newArr: string[] = [];

    options.forEach(item => {
      if (currentActive.indexOf(item.id) > 0) {
        newArr.push(item.text);
      }
    });

    this.setState(
      () => ({ selected: newArr }),
      () => {
        console.log('update state in updateSelected: ', this.state);
      }
    );
  };

  render() {
    const { currentActive, selected } = this.state;
    const { title, name, options, setFieldValue } = this.props;

    return (
      <SelectFieldComp>
        <h3>{title}</h3>
        <div>
          {options.map(({ id, text }) => {
            const classList = currentActive.indexOf(id) > 0 ? 'active' : '';

            return (
              <button
                key={id}
                type="button"
                className={classList}
                onClick={() => {
                  this.updateCurrentActive(id);
                  this.updateSelected();
                  setFieldValue(name, selected);
                }}
              >
                {text}
              </button>
            );
          })}
        </div>
      </SelectFieldComp>
    );
  }
}

export default SelectField;

Svar #1

Det första parametern i this.setState() är ett objekt och det ser ut som att du skickar en funktion.

Försök

 this.setState({ currentActive: newCurrentActive });

Att logga till konsolen direkt efter att ha anropat setState fungerar inte heller eftersom internals i setState är asynkrona och kanske inte har satts än.

Du kan console.log i din render-metod efter this.props eftersom detta kommer att visa tillståndet vid om-rendering av komponenten.