Jak za pojedynczym kliknieciem ustawic wartosc obiektu w useState()?

Probuje ustawic wartość w setEl(), ale potrzebuje dwoch klikniec aby to zrobic. Syntax z javyscript wystarczal na pojedyncze klikniecie ale w typescript nie dziala

setEl((el) => ({ ...el, old: act }));

co zrobic w takiej sytuacji (moze da sie bez useEffect()) ?

tu jest kod https://codesandbox.io/s/usereducer-grgc9y?file=/src/Todo.tsx:0-591

interface IMenuItems {
  name: string;
  id: number;
  children?: any[];
}
interface Element {
  old: IMenuItems;
  act: IMenuItems;
}

type Action =
  | { type: "start" }
  | { type: "add"; newArr: IMenuItems }
  | { type: "root"; data: IMenuItems[] };

function Todo() {
  const [el, setEl] = useState({} as Element);
  const handle = () => {
    setEl((el) => ({ ...el, old: { name: "dddd", id: 2 } }));
    console.log(JSON.stringify(el));
  };
  return (
    <div>
      <h1>Todos</h1>
        <div onClick={() => handle()}>click</div>;

    </div>
  );
}

unikaj as tak długo, jak możesz.

I czytaj dokumentację przed losowymi próbami

interface Element {
  old?: IMenuItems;
  act?: IMenuItems; // zwróć uwagę na pytajniki - skoro domyślnie nie przypisujesz tam wartości to po prostu oznacz właściwości jako opcjonalne
}

// ...

const [el, setEl] = useState<Element>({});

dzek69 napisał(a):

unikaj as tak długo, jak możesz.

I czytaj dokumentację przed losowymi próbami

interface Element {
  old?: IMenuItems;
  act?: IMenuItems; // zwróć uwagę na pytajniki - skoro domyślnie nie przypisujesz tam wartości to po prostu oznacz właściwości jako opcjonalne
}

// ...

const [el, setEl] = useState<Element>({});

dzek69 dzieki za wyrownanie innych bledow :), ale dlaczego setEl dziala dopiero za drugim kliknieciem , a nie juz za pierwszym ?
to chyba nie sa losowe proby, ja po prostu aplikacje w javascript chce przepisac na typescript...

artur2015 napisał(a):

to chyba nie sa losowe proby, ja po prostu aplikacje w javascript chce przepisac na typescript...

To nie będzie działać ani w JS ani w TS.

const [el, setEl] = useState({} as Element);
const handle = () => {
  setEl((el) => ({ ...el, old: { name: "dddd", id: 2 } })); // aktualizujesz stan, i w następnym renderze w stanie będzie nowa wartość
  console.log(JSON.stringify(el));  // ale zmienna "el" sama w sobie oczywiście się nie zmieniła
};

To nie będzie działać ani w JS ani w TS.

const [el, setEl] = useState({} as Element);
const handle = () => {
  setEl((el) => ({ ...el, old: { name: "dddd", id: 2 } })); // aktualizujesz stan, i w następnym renderze w stanie będzie nowa wartość
  console.log(JSON.stringify(el));  // ale zmienna "el" sama w sobie oczywiście się nie zmieniła
};

jak zatem wymusic natychmiastowy render po aktualizacji stanu ?

artur2015 napisał(a):

To nie będzie działać ani w JS ani w TS.

const [el, setEl] = useState({} as Element);
const handle = () => {
  setEl((el) => ({ ...el, old: { name: "dddd", id: 2 } })); // aktualizujesz stan, i w następnym renderze w stanie będzie nowa wartość
  console.log(JSON.stringify(el));  // ale zmienna "el" sama w sobie oczywiście się nie zmieniła
};

jak zatem wymusic natychmiastowy render po aktualizacji stanu ?

A po co chciałbyś to zrobić? Nie da się.

Próbujesz zrobić coś bardzo dziwnego - zrób krok wstecz i powiedz co dokładnie próbujesz zrobić.