Булевый тип в state React

Question

Собственно, есть такой код на React:

import './App.css';
import Car from './Car/Car';
import { useState } from 'react';

function App() {
  const state = {
    cars: [
      {name: 'Ford Focus', year: 2016},
      {name: 'Audi A7', year: 2019},
      {name: 'Mazda CX5', year: 2017}
    ]
  }

  const [ pageTitle, setPageTitle ] = useState('Cars');
  const changeTitleHandler = newTitle => {
    setPageTitle(newTitle);
  }

  const [ showCars, setShowCars ] = useState(false);
  const toggleCarsHandler = () => {
    setShowCars(!showCars);
  }

  const divStyle = {
    textAlign: 'center',
  }

  return (
    <div style={divStyle}>
      <h2>{pageTitle}</h2>
      <button onClick={toggleCarsHandler}>Toggle</button>
      { state.showCars
          ? state.cars.map((car, i) => {
            return (
              <Car 
                key={i}
                name={car.name}
                year={car.year}
                onChangeTitle={() => changeTitleHandler(car.name)}
              />
            )
          }) 
        : null
      }
    </div>
  );
}

export default App;

Я хочу реализовать следующую логику: раньше мой код просто выводил информацию про машины, теперь я хочу, чтобы это происходило по нажатию на кнопку, а при повторном нажатии хочу информацию снова скрывать. Для этого я через тернарный оператор проверяю значение showCars (true-вывести, false - скрыть):

{ state.showCars
          ? state.cars.map((car, i) => {
            return (
              <Car 
                key={i}
                name={car.name}
                year={car.year}
                onChangeTitle={() => changeTitleHandler(car.name)}
              />
            )
          }) 
        : null
      }

И непосредственно используемая мной функция toggleCarsHandler, которая меняет значение state:

  const [ showCars, setShowCars ] = useState(false);
  const toggleCarsHandler = () => {
    setShowCars(!showCars);
  }

Непосредственно вопрос: почему сам showCars не появился в State? VsCode дает мне такую подсказку на 32 строке, но я ничего не смог придумать. Буду благодарен за объяснения

Answer 1

Объявленная переменная (константа) state в коде - это просто объект, который не имеет отношения к реактовскому состоянию и вызов функции (хука) useState никак не влияет на этот объект.

В данном коде достаточно использовать showCars, как уже подсказали в комментариях к вопросу. Также рекомендую к прочтению документацию про хук состояния.

Там как раз в примерах есть описание состояния в качестве свойства класса и аналогичное использование хука в функциональных компонентах.

Использование состояния в классах:

this.state = {showCars: true};
this.setState({showCars: !this.state.showCars});

Эквивалентно использованию хука в функциональных компонентах:

const [showCars, setShowCars] = useState(true);
setShowCars(!showCars);

БЛОГ НА HUSL

Булевый тип в state React

Ответы (1 шт):