Почему при нажатии на одну кнопку изменения касаются всех кнопок?

Question

Зигмунд

javascript , react

Почему при нажатии на одну кнопку изменения касаются всех кнопок?

Почему при нажатии на одну кнопку изменяются состояния всех кнопок? Как можно сделать так, чтобы при нажатии на одну кнопку изменения не влияли на состояния других кнопок? <pre><code class="typescript">const [icon,setIcon] = useState(true);

let btn = (id) =&gt;{
  [...todo].forEach(item =&gt;{
    if(item[0] == id){
      setIcon(!icon)
    }
    return item
  })
  
  
}
&lt;button className={`icon ${icon ? 'icon-pause' : 'icon-play'}`}
                             onClick={() =&gt; btn(item[0])}&gt;&lt;/button&gt;</code></pre> <br/> <br/> массив todo состоит из 3 элементов, но может быть и больше. <br/>

29 декабря 2024 г. 16:33

Ответы на вопрос 1

Похожие вопросы

Answer 1

Проблема, с которой вы столкнулись, связана с тем, что вы используете одно состояние (`icon`) для всех кнопок. Когда вы меняете состояние `icon`, оно изменяется для всех кнопок одновременно, поскольку все они ссылаются на одно и то же состояние.

Чтобы исправить это, вам нужно хранить состояние отдельно для каждой кнопки или элемента массива `todo`. Один из подходов — изменить структуру вашего состояния, чтобы оно хранило или индикатор состояния для каждой кнопки. Например, вы можете использовать объект или массив, где каждый элемент будет хранить состояние отдельной кнопки.

Вот пример, как это можно реализовать:

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

const App = () => {
  // Предположим, ваш массив todo выглядит примерно так:
  const [todo, setTodo] = useState([
    { id: 1, completed: false },
    { id: 2, completed: false },
    { id: 3, completed: false },
  ]);

  const toggleIcon = (id) => {
    setTodo((prevTodo) => 
      prevTodo.map((item) => 
        item.id === id ? { ...item, completed: !item.completed } : item
      )
    );
  };

  return (
    <div>
      {todo.map((item) => (
        <button 
          key={item.id} 
          className={`icon ${item.completed ? 'icon-pause' : 'icon-play'}`} 
          onClick={() => toggleIcon(item.id)}
        >
          {/* Вы можете добавить здесь содержимое кнопки */}
        </button>
      ))}
    </div>
  );
};

export default App;
```

В этом примере мы используем массив объектов `todo`, где каждый объект содержит свойство `completed`, которое указывает на состояние кнопки. При нажатии на кнопку для конкретного элемента мы изменяем его состояние, не влияя на другие кнопки. 

Таким образом, каждая кнопка будет отображать свое собственное состояние, и нажатие на одну кнопку не повлияет на состояния других кнопок.