Как удалить объект из массива стейта?

Question

Использую стейт менеджер zustand. В стейте массив объектов, по клику на кнопку необходимо удалить объект массива стейта. А данный код удаляет весь массив из стейта...Не могу понять почему не удаляется конкретный объект. необходимо удалить по клику на кнопку: { "name": "Saski Baskonia", "price": "4" } или любой другой добавленный объект. имею текущий массив в стейте:

[ { "name": "FC Bayern München", "price": "1.42" }, { "name": "Saski Baskonia", "price": "4" }, { "name": "Virtus Segafredo Bologna", "price": "1.8" } ]

код в сторе:

const createCouponSlice = (set, get) =>({
   marketInfoList: [],
   addToMarketInfoList: (name, price) => {
    const newTeam = {name, price}
    set({
        marketInfoList: Array.from(new Set(([...get().marketInfoList, newTeam]).map(item => JSON.stringify(item)))).map(item => JSON.parse(item))
    })
   },
   removeToMarketInfoList: (id) => {
    set({ 
    marketInfoList: get().marketInfoList.filter(market => market.id != id)
    })
   },
}) 
export default createCouponSlice;```

код в компоненте, из которой необходимо удалить объект:

``` const removeToMarketInfoList = useStore((state) => state.removeToMarketInfoList)

    return (  
                <div>{marketInfoList.map((market) => (
                <div key={market.id}>
                    <Typography >{market.price}{' '}{market.name}
                    <button onClick={() => removeToMarketInfoList(market.id)}>x</button>
                    </Typography>
                    
                </div>
               ))}

Answer 1

Кажется ошибка в том, что ты удаляешь по id, которого у тебя нет =)
Можно поменять логику на удаления по имени


const createCouponSlice = (set, get) => ({
  marketInfoList: [],
  addToMarketInfoList: (name, price) => {
    const newTeam = { name, price };
    set({
      marketInfoList: Array.from(new Set([...get().marketInfoList, newTeam].map((item) => JSON.stringify(item)))).map(
        (item) => JSON.parse(item)
      ),
    });
  },
  removeToMarketInfoList: (name) => {
    set({
      marketInfoList: get().marketInfoList.filter((market) => market.name != name),
    });
  },
});
export default createCouponSlice;

// код в компоненте, из которой необходимо удалить объект:

const removeToMarketInfoList = useStore((state) => state.removeToMarketInfoList);

return (
  <div>
    {marketInfoList.map((market) => (
      <div key={market.name}>
        <Typography>
          {market.price} {market.name}
          <button onClick={() => removeToMarketInfoList(market.name)}>x</button>
        </Typography>
      </div>
    ))}
  </div>
);

БЛОГ НА HUSL

Как удалить объект из массива стейта?

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