Изменение состояния state в React

Question

Суть проблемы: я начал учить React и не могу разобраться с обработчиками. Я пытаюсь по клику изменить состояние объекта state, но у меня появляется ошибка:

undefined is not an object (evaluating 'this.setState')

Как понимаю, у меня не получается обратиться к State, но почему именно я тоже не понимаю. Прилагаю код, буду благодарен за разъяснения

import './App.css';
import Car from './Car/Car'

function App() {
  const state = {
    cars: [
      {name: 'Ford Focus', year: 2016},
      {name: 'Audi A7', year: 2019},
      {name: 'Mazda CX5', year: 2017}
    ],
    pageTitle: 'Cars'
  }
  const changeTitleHandler = () => {
    this.setState({
      pageTitle: 'Information about cars'
    })
  }

  const cars = state.cars;
  const divStyle = {
    'textAlign': 'center',
  }

  return (
    <div style={divStyle}>
      <h2>{state.pageTitle}</h2>
      <button onClick={changeTitleHandler}>Change title</button>
      <Car name={cars[0].name} year={cars[0].year} />
      <Car name={cars[1].name} year={cars[1].year} />
      <Car name={cars[2].name} year={cars[2].year} />
    </div>
  );
}

export default App;

Answer 1

this.setState используется в классовых компонентах, а App - функциональный компонент (т.к. написано function App() а не class App extends React.Component)

Чтобы реализовать подобное в функциональном компоненте, нужно написать следующее:

import React, { useState } from 'react';

function App() {

    const [ pageTitle, setPageTitle ] = useState('cars'); //pageTitle - значение стейта, а setPageTitle - изменение стейта
    
    function changeTitleHandler() {
        setPageTitle('Information about cars');
    }    

    return (
        <div>
            <h2>{ pageTitle }</h2>
            <button onClick={changeTitleHandler}>Change title</button>
        </div>
    );
 }

export default App;

P.S.: Если погуглить "React - классовые компоненты", "React - функциональные компоненты", можно найти много интересного, а также подробные инструкции по использованию того или иного подхода. Если делать в точности как написано в руководстве - будет получаться. React вряд-ли можно использовать пытаясь интуитивно писать код наугад. Сначала научитесь делать точно как в руководстве, и потом уже пишите свой код отталкиваясь от этих знаний.

P.P.S.: Если мы хотим установить какой то конкретный, но всегда разный текст через функцию, можно написать так:

function changeTitleHandler( text ) {
    setPageTitle( text );
}

После этого функция вызывается так:

<button onClick={() => changeTitleHandler("новый текст")}>Change title</button>

БЛОГ НА HUSL

Изменение состояния state в React

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