'abstrakcyjny' konstruktor

Czy jest jakiś prosty sposób na to, aby napisać dla komponentu -klasy Reacta konstruktor, który będzie abstrakcyjny w tym sensie, że będzie pozwalał na przepisywanie na stan różnych propsów? Dla uproszczenia, założmy, że propsy nie będą zagnieżdżone ( możę to niewłaściwe słowo: chodzi o to, że będą zawierały tylko typy proste, w każdym razie przykład pokazuje o co mi chodzi). Generalnie propsem w ogólności będzie zawartość pliku .json.

Czyli na przykład możliwe jest wczytanie i dalsza obróbka jsona zawierającego sekwencję takich danych

{
    "id": 4,
    "firstName": "Justyna",
    "lastName": "Kowalczyk",
    
  },

ale również takich danych

{
    "id": 4,
    "firstName": "Justyna",
    "lastName": "Kowalczyk",
    "dateOfBirth": "1962.11.26",
    "company": "Polbruk",
    "note": 120
  },

Nie mam pjęcia co chcesz zrobić, weź opisz to po ludzku, najlepiej problem, nie to jak chcesz go rozwiązać.

Ok,
W takim razie cofnę się do innego wątku

React: przejmowanie danych ze zdarzenia
Zasadniczo chodzi o to co jest napisane w tym temacie. Konstrukcja jaką zaproponował Błękitny programista jest na pewno dobra ale złożona. na razie w zasadzie kod działa i jest to jakoś rozwiązane, ale postać konstruktora

 class App extends React.Component {
    constructor(props) {
    super(props);
    this.state= {//staff: this.props.initialStaffTable,
      staff: this.props.data.map(ob=>Object.values(ob)),
      nonFilteredStaff:this.props.data.map(ob=>Object.values(ob)),
         headers: Object.keys(this.props.data[0]),
         staffPerPage : 5,
         currentPage : 1,
         columnSortBy :null,
         isSortDescending: false,
         isFilterVisible: false,
         filter_id: '',
         filter_firstName: '',
         filter_lastName: '',
         filter_dateOfBirth:'',
         filter_company:'',
         filter_note:'',
        };
      
    this.sortHandle = this.sortHandle.bind(this);
    this.showFilter =this.showFilter.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handlePageClick= this.handlePageClick.bind(this);
    
       
    }

jest nieelagancka - aż się prosi, aby wszystko co ma filter z przodu wrzucić do jednego obiektu. Z drugiej strony mam ładnie działajacą obsługę zdarzenia

handleChange (evt) {this.setState({ ['filter_'+ evt.target.name]: evt.target.value });}

Która jednak - jak mnie oświecono - nie zadziała wprost z zagnieżdżanym - obiekt w obiekcie state. Jest rozwiązanie Błekitnego, pytanie, czy nie ma czegoś prostszego co zadziała z tym handleChange

Przecież nie ma nic na przeszkodzie, żebyś napisał tak:

this.setState({
    ...this.state, filter: {
        ...this.state.filter, [evt.target.name]: evt.target.value
    }
});

Zaczekaj. Czy w tym i poprzednim przykładzie pisząc ... miałeś na myśli jakąś częśc kodu czy operator rest/spread?

@Błękitny Programista miał na myśli spread operator, tyle, że powinno to wyglądać tak:

this.setState({
  filter: {
    ...this.state.filter, [evt.target.name]: evt.target.value
  }
});

setState merguje zmiany do poprzedniego state'a, więc nie trzeba kopiować pierwszej warstwy.

Można też użyć drugiego zapisu dla setState - przekazać funkcję przyjmująca poprzedni state i zwracającą zmiany do wmergowania, dzięki temu można to załatwić mutując poprzedni state:

this.setState(state => {
  state.filter[evt.target.name] = evt.target.value
  return state
});

Przykład: https://stackblitz.com/edit/react-ruhebn

Poszedłem za sposobem 1, wolę tak rozpisana składnię niż nową funkcje, niemniej coś VSCode protestuje przeciwko takiemu kodowi a protest zaczyna się kiedy tylko dostanie spreada.

Jaki komunikat? Linter marudzi czy co? Jaka wersja VS Code?

Zamiast spreada możesz użyć starszej metody:

this.setState({
  filter: Object.assign(
    {}, this.state.filter, { [evt.target.name]: evt.target.value }
  }
});