@gsdev99

Как правильно использовать useState?

Всем привет. Ребята, подскажите, пожалуйста, как правильно использовать useState? Что в данном примере я сделал не правильно?
import React, {useState} from "react";

const App = () => {
  const cities = [
    {id: 1, name: 'Moscow'},
    {id: 2, name: 'Kazan'},
    {id: 3, name: 'Sochi'},
    {id: 4, name: 'Ekaterinburg'}
  ]

  const [data, changeData] = useState(cities);

  const handler = () => {
    console.log(data);

    data.push({
      id: 5, name: 'Saint-Petersburg'
    });

    changeData(
      data
    );

    console.log(data);
  }

  console.log('render');

  return (
    <div>
      <button onClick={() => handler()}>Click Me</button>
      {
        data.map((item) => {
          return (
            <ul key={item.id}>
              <li>{item.name}</li>
            </ul>
          )
        })
      }
    </div>
  );
};

export default App;
  • Вопрос задан
  • 593 просмотра
Решения вопроса 2
rockon404
@rockon404 Куратор тега React
Frontend Developer
Что в данном примере я сделал не правильно?

Почти все.
import React, { useState } from "react";

const initialState = [
  { id: 1, name: 'Moscow' },
  { id: 2, name: 'Kazan' },
  { id: 3, name: 'Sochi' },
  { id: 4, name: 'Ekaterinburg' },
];

const App = () => {
  const [ cities, setCities ] = useState(initialState);

  const handler = () => {
    setCities(prevState => [...prevState, { id: 5, name: 'Saint-Petersburg' }]);
  };

  return (
    <div>
      <button onClick={handler}>Click Me</button>
      <ul>
        {cities.map(city => <li key={city.id}>{city.name}</li>)}
      </ul>
    </div>
  );
};

export default App;
Ответ написан
Комментировать
hzzzzl
@hzzzzl
ты напрямик меняешь data, а а надо менять ее через changeData

data.push({ id: 5, name: 'Saint-Petersburg' });
changeData( data );


вот так заработает
https://codepen.io/anon/pen/QoBLKo
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы