Почему useState отказывается работать когда массив объявлен через const?

Question

[Artem641]

У меня два состояния - в первом массив объявлен через let, а во втором через const.
Второе состояние (value) работает прекрасно, а вот первое не хочет работать через const.

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

export const App = () => {
  let [counter, setCounter] = useState(0)
  const [value, setValue] = useState('---')

  const increment = () => {
    counter = setCounter(counter + 1)
  }

  const decrement = () => {
    counter = setCounter(counter - 1)
  }
  console.log(counter)
  return (
    <div className="wrapper">
      <h1>counter: {counter}</h1>
      <h2>{value}</h2>
      <input
        type="text"
        value={value}
        onChange={(e) => {
          setValue(e.target.value)
        }}
      />
      <button onClick={increment}>increment</button>

      <button onClick={decrement}>decrement</button>
    </div>
  )
}

Comments

[0xD34F]

counter = setCounter(counter + 1)

Откуда вы эту мерзость взяли, кто вас такому научил?

не хочет работать через const

Может, прежде чем браться за react, освоите js - хотя бы основы основ?

[Kentavr16]

почему в одном случае ты изменяешь состояние так setValue(e.target.value) а в другом пытаешься это сделать так counter = setCounter(counter + 1)?Мой совет - начинать изучение с основ js,как предложили выше, после - чтение документации (там очень подробно про состояния и хуки). Если лень - вкинь код в чатГПТ, он хорошо с простыми примерами справляется. И если все это не помогло - спрашивай здесь. Вот тебе пример из доков:

import React, { useState } from 'react';

function Example() {
  // Объявление новой переменной состояния «count»
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы кликнули {count} раз(а)</p>
      <button onClick={() => setCount(count + 1)}>
        Нажми на меня
      </button>
    </div>
  );
}

Answer 1

[Максим Themms]

У меня все работает, как через let так и через const

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

export const Test = () => {
  let [counter, setCounter] = useState(0);
  const [value, setValue] = useState('---');

  const increment = () => {
    counter = setCounter(counter + 1);
  };

  const decrement = () => {
    counter = setCounter(counter - 1);
  };
  console.log(counter);
  return (
    <div className="wrapper">
      <h1>counter: {counter}</h1>
      <h2>{value}</h2>
      <input
        type="text"
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
      <button onClick={increment}>increment</button>

      <button onClick={decrement}>decrement</button>
    </div>
  );
};