다른 항목이 배열에 추가되면 배열에서 항목을 제거합니다.

Question

숫자 배열이 있는데이 항목에이 항목을 추가하면 숫자가이 항목으로 바뀝니다.

내가 겪고있는 문제는 대부분의 경우 숫자를 대체한다는 것이지만 때때로 숫자 옆에 항목을 추가한다는 것입니다.

나 또한 항목 옆에 숫자가 표시 될 수 있다는 점에서 항목을 제거 할 때도 동일한 문제가 발생합니다.

또한 항목이 두 번 추가되면 항목의 인스턴스 하나가 표시되고 항목을 실제로 제거하려면 제거 단추를 두 번 클릭해야하는 항목이 여러 번 추가 될 수 있습니다.

추가/제거시 항목 옆에 나타나는 숫자의 동작을 방지하고 항목을 두 번 이상 추가 할 수 없게하려면 어떻게해야합니까?

https://codesandbox.io/s/jp26jrkk89

Hello.js

import React from 'react'; 
import update from 'immutability-helper' 
import styled from 'styled-components' 
import Product from './Product' 

const NumberWrap = styled.div` 
    display: flex; 
    flex-wrap:wrap 
    border: 1px solid #ccc; 
    flex-direction: row; 
` 

const Numbers = styled.div` 
    display:flex; 
    background: #fafafa; 
    color: #808080; 
    font-size: 32px; 
    flex: 0 0 20%; 
    min-height: 200px; 
    justify-content: center; 
    align-items:center; 
    border-right: 1px solid #ccc; 
` 

const CardWrap = styled.div` 
    display:flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    margin-top: 20px; 
` 

export default class Hello extends React.Component { 
    constructor() { 
    super() 
    this.state = { 
     placeholder: [1, 2, 3, 4, 5], 
     addedArray: [], 
     data: [ 
     { id: 1, header: 'Item 1' }, 
     { id: 2, header: 'Item 2' }, 
     { id: 3, header: 'Item 3' }, 
     { id: 4, header: 'Item 4' } 
     ], 
     addedItems: [], 
    } 
    } 

    handleAdd = (id) => { 
    const nextAdded = [id, ...this.state.addedArray]; 
    this.setState({ 
     addedArray: nextAdded, 
     addedItems: update(this.state.addedItems, { 
     $push: [ 
      id, 
     ], 
     }) 
    }) 
    } 

    handleRemove = (id) => { 
    const index = this.state.addedItems.indexOf(id); 
    const nextAdded = this.state.addedArray.filter(n => n != id); 
    this.setState({ 
     addedArray: nextAdded, 
     addedItems: update(this.state.addedItems, { 
     $splice: [ 
      [index, 1] 
     ], 
     }) 
    }) 
    } 

    render() { 
    return (
     <div> 
     <NumberWrap> 
      { 
      this.state.placeholder.map(num => 
       <Numbers> 
       {this.state.addedArray.filter(n => n == num).length == 0 && num} 
       { 
        this.state.data.filter(item => { 
        return this.state.addedItems.indexOf(item.id) === num - 1; 
        }).slice(0, 5).map(item => 
        <Product {...item} remove={() => { this.handleRemove(item.id) }} /> 
        ) 
       } 
       </Numbers> 
      ) 
      } 
     </NumberWrap> 


     <CardWrap> 
      { 
      this.state.data.map(item => 
       <Product 
       {...item} 
       add={() => { 
        this.handleAdd(item.id) 
       }} 
       /> 
      )} 
     </CardWrap> 
     </div> 
    ) 
    } 
} 

Product.js가 직접 항목 작업과에 저장할 쉽게 것 같습니다이 경우

import React from "react"; 
import styled from "styled-components"; 

const Card = styled.div` 
    flex: 0 0 20%; 
    border: 1px solid #ccc; 
`; 

const Header = styled.div` 
    padding: 20px; 
`; 

const AddBtn = styled.button` 
    width:100%; 
    height: 45px; 
`; 

const Product = props => { 
    const { add, id, header, remove } = props; 
    return (
    <Card> 
     <Header key={id}> 
     {header} 
     </Header> 
     <AddBtn onClick={add}>Add</AddBtn> 
     <AddBtn onClick={remove}>Remove</AddBtn> 
    </Card> 
); 
}; 

export default Product; 

Answer 1

를 사용하는 처리기를 추가 변경 객체에 addedItems를 변경 데모에 대한 링크는 다음과 같습니다

https://codesandbox.io/s/8kl2pkw5m0

---

내가 삭제 한 addedItems 그냥 여기

addedArray 배열 밖으로 세트를 만들기 여러에게

const nextAdded = [...new Set([id, ...this.state.addedArray])]; 

추가 막을 수있는 한 방법입니다 사용 후 배열이 그것을 만들 얻을 방법은 모든 중복 항목이 제거됩니다.

Answer 2

목적.

작업 예제는 my fork을 확인하십시오.

가 확인하시기 바랍니다 :

• 는
• 이 항목 객체 여기에 직접

---

export default class Hello extends React.Component { 
    constructor() { 
    super() 
    this.state = { 
     placeholder: [1, 2, 3, 4, 5], 
     data: [ 
     { id: 1, header: 'Item 1' }, 
     { id: 2, header: 'Item 2' }, 
     { id: 3, header: 'Item 3' }, 
     { id: 4, header: 'Item 4' } 
     ], 
     addedItems: {}, 
    } 
    } 

    handleAdd = (item) => { 
    this.setState({ 
     addedItems: update(this.state.addedItems, { 
     [item.id]: {$set: item} 
     }) 
    }) 
    } 

    handleRemove = (item) => { 
    this.setState({ 
     addedItems: update(this.state.addedItems, { 
     $unset: [item.id] 
     }) 
    }) 
    } 

    render() { 
    return (
     <div> 
     <NumberWrap> 
      {this.state.placeholder.map(num => { 
      const item = this.state.addedItems[num]; 
      return (
       <Numbers> 
       {item && 
        <Product 
        key={num} 
        {...item} 
        remove={() => { 
         this.handleRemove(item); 
        }} 
        /> 
       } 
       </Numbers> 
      ); 
      })} 
     </NumberWrap> 
     <CardWrap> 
      {this.state.data.map(item => 
      <Product 
       {...item} 
       add={() => { 
       this.handleAdd(item) 
       }} 
      /> 
     )} 
     </CardWrap> 
     </div> 
    ) 
    } 
}