Как сделать тогл булевого свойства в стейте?

Question

[alesik]

function Toggle() {
  let [state, setState] = useState({
    fromBook: [
      { text: "Отрывок из книги 1" },
      { text: "Отрывок из книги 2" },
      { text: "Отрывок из книги 3" },
    ],
    show: false,
    id: 0,
  });

  function showExcerpt() {
    let show = state.show;
    setState({ show: !show });
    console.log(state.show);
    console.log(state.fromBook);
{/*После второго нажатия state.fromBook становится undefined:*/}

  }

  return (
    <div>
      <button onClick={showExcerpt}>Показать отрывок </button>

      {/* <p>{state.excerpts[state.id].text}</p> */}
    </div>
  );
}

Answer 1

[0xD34F]

Разделить объект state - для каждого из его свойств сделать отдельный вызов useState.

Или копировать все свойства при обновлении: setState({ ...state, show: !state.show });.

Comments

[Владимир]

Имхо разделить стейт - отличная идея.

Answer 2

[Павел]

setState({ show: !show });
Так вы переписываете state