Почему не происходит перерисовка при изменении объекта?

Question

[mk11]

Есть объект store и функция изменения isClicked:

export const store = {
    items: [
      {
        id: 1,
        isClicked: false,
      },
      {
        id: 2,
        isClicked: false,
      }
    ],
  };

export function changeClikced(id) {
    const getItem = store.items.find(item => item.id == id);
    if (getItem) getItem.isClicked = true;
}

Есть компонент App:

function App() {
  const [items, setItems] = useState(store.items);

  const catchPokemon = (id) => () => {
    changeClikced(id)
    console.log(items)
  }

  return (
    <>
      {items.map((item) => (
        <button onClick={catchPokemon(item.id)} key={item.id}>
          {!item.isClicked ? 'Нажать' : 'Уже была нажата' }
        </button>    
      ))}
    </>
  );
}

При нажатии на кнопку isClicked меняться, но компонент не перерисовывается. Можно ли заставить кнопки изменять свой текст при клике?

Answer 1

[historydev]

https://playcode.io/1906046

Comments

[mk11]

Кнопка изменяется, но хотелось бы иметь зависимость от объекта state

Answer 2

[Alexandroppolus]

У тебя объект 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;
});

Answer 3

[Алексей Уколов]

Отвечу на вопрос почему.
Причины две:
1. При старте вы сохраняете копию массива в локальный стейт и дальше работаете с ней.
2. Даже если бы вы этого не делали, а итерировали по оригинальному массиву, всё равно бы не работало как вы ожидаете, потому что вы мутируете внутреннее состояние объекта, а Реакт в него не смотрит и запускает перерегдер только тогда, когда меняется ссылка на сам объект.