reactjs - Waarom werkte setState in dit geval niet in NextJS?

Hallo iedereen!
Ik heb een probleem - setState werkt niet in mijn NextJS + TS applicatie.
Ik heb mijn state geprobeerd via ReactHooks, maar niets werkte, de component omgezet naar een klasse, maar niets werkte.
Ik heb geprobeerd deze component uit te voeren in een nieuw aangemaakte CRA-applicatie zonder TS. Alles werkte daar.

Het component ontvangt de array via props en rendert deze als knoppen.
De state bevat twee eigenschappen, currentActive en selected.
Wanneer de gebruiker op de knop klikt, wordt de eerste functie geactiveerd die this.state.currentActive zou moeten bijwerken
vervolgens de tweede die this.state.selected zou moeten bijwerken

In de this.setState-functie roep ik een callback aan, die naar de console zou moeten printen dat de state is bijgewerkt. Maar er wordt niets weergegeven, het lijkt erop dat this.setState niet wordt aangeroepen!

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;

Antwoord #1

De eerste parameter van this.setState() is een object en het lijkt erop dat je een functie doorgeeft.

Proberen

 this.setState({ currentActive: newCurrentActive });

Het direct loggen naar de console na het aanroepen van setState werkt ook niet, omdat de interne werking van setState asynchroon is en ze mogelijk nog niet zijn ingesteld.

Je zou console.log kunnen gebruiken in je render-methode na this.props aangezien dit de staat zal tonen bij het opnieuw renderen van de component.