Общий стейт на все компоненты в мапе

Question

Столкнулся с такой проблемой: стейт пробрасываю в нужный компонент мапом, и ожидаю что для каждого рендера итерации будет разный стейт. Пример: В App.js храню стейт, его пробрасываю в Cart.jsx, а после:

{props.cartContent.map((cartItem, index) =>
    <CartItem
        key={index}
        amount={props.amount}
        setAmount={props.setAmount}
        {...cartItem}
     />
 )}

в cartItem. В нём следующая тема:

<button onClick={() => setAmount(prev => prev > 1 ? prev - 1 : amount)}> - </button>
<h3>{amount}</h3>
<button onClick={() => setAmount(prev => prev + 1)}>+</button>

На странице получается отрендеренные 5 карточек, и при изменении счётчика у одной карточки, такое же значение применяется и на все другие. Если стейт оставить в CartItem всё ок, но мне он нужен в аппе

Answer 1

Организуем стейт в компоненте родителе:

const datas = [
  {value: 0},
  {value: 0},
  {value: 0},
  {value: 0},
];

const Card = ({ cardValue, change, idx }) => {
  return (
    <div>
      <span>{cardValue}</span>
      <button onClick={() => change(idx, 1)}>+</button>
      <button onClick={() => change(idx, -1)}>-</button>
    </div>
  )
}

export default function App() {
  const [cards, setCards] = useState(datas);

  const change = (idx, val) => {
    const elements = [ ...cards ];
    elements[idx].value += val;
    setCards(elements);
  }

  return (
    <div className="App">
      {cards.map((item, index) => <Card key={index} cardValue={item.value} change={change} idx={index} />)}
    </div>
  );
}

БЛОГ НА HUSL

Общий стейт на все компоненты в мапе

Ответы (1 шт):