Почему изменения объекта не отражаются автоматически?

Как можно обеспечить перерисовку компонента `App` после изменения значения `isClicked` при нажатии на кнопку?
  • 14 июня 2024 г. 15:41
Ответы на вопрос 3
Изменения объекта не отражаются автоматически, так как React не отслеживает и не перерисовывает компоненты при изменении внутренних свойств объектов. 

Для того чтобы обеспечить перерисовку компонента `App` после изменения значения `isClicked` при нажатии на кнопку, можно использовать `useState` хук для создания состояния компонента, которое будет отслеживать изменения `isClicked`. Далее, при изменении `isClicked` вызывать функцию, которая обновит это состояние и тем самым заставит компонент `App` перерисоваться. Вот пример кода:

```jsx
import React, { useState } from 'react';

function App() {
  const [isClicked, setIsClicked] = useState(false);

  const handleClick = () => {
    setIsClicked(!isClicked);
  }

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      {isClicked ? <p>Button is clicked!</p> : null}
    </div>
  );
}

export default App;
```

В этом примере, при нажатии на кнопку происходит изменение значения `isClicked` с помощью функции `setIsClicked`, что приводит к перерисовке компонента `App` и отображению текста "Button is clicked!".
У тебя объект store - не наблюдаемый. Хочешь его сделать наблюдаемым, натрави на него mobx. 

А если на голом Реакте, то надо делать изменения через setItems, примерно так
setItems((prev) => {
  const i = prev.findIndex(item => item.id === id);
  if (i < 0 || prev[i].isClicked) {
    return prev;
  }
  const newArr = [...prev];
  newArr[i] = {...prev[i], isClicked: true};
  return newArr;
});
Похожие вопросы