Как добавить несколько элементов в массив с реагировать - PullRequest
Новая
       15

Как добавить несколько элементов в массив с реагировать

0 голосов
/ 19 октября 2019

У меня есть два класса. Один содержит массив, другой содержит реквизиты массива. Это мои классы:

// РОДИТЕЛЬСКИЙ КЛАСС: 

constructor() {
   super()

   this.state = {
      items: []
   }

   this.addItem = this.addItem.bind(this)
}

componentDidMount(){
   this.setState({
      items: [{
         name: 'Sebastian',
         num: '001'
      },{
         name: 'Josh',
         num: '002'
      }]
   })
}

addItem() {
??????
}

render() {
   return(
      <div>
        <MethodA items={this.state.items} addItem={this.addItem}/>
      </div>
   )
}

// ДЕТСКИЙ КЛАСС: 

function MethodA(props) {
   return(
      <div>
         {props.items.map((item, i) =>{
            return(<div key={i}>
               <span>{item.name}</span>
               <span>{item.num}</span>
            </div>)
         })}

         <button onClick={() => { props.addItem() }}>ADD ITEM</button>
      </div>
   )
}

Текущий результат такой: 

<div>
   <span>Sebastian</span>
   <span>001</span>
</div>
<div>
   <span>Sebastian</span>
   <span>002</span>
</div>

Затем после нажатия кнопки «ДОБАВИТЬ ПУНКТ» это будет новый результат: 

<div>
   <span>Sebastian</span>
   <span>001</span>
</div>
<div>
   <span>Sebastian</span>
   <span>002</span>
</div>
<div>
   <span>New Name</span>
   <span>New Num</span>
</div>

Я не уверен, что и как использовать между push () или concat ()или оба. Есть идеи?

Ответы [ 2 ]

1 голос
/ 19 октября 2019

Во-первых, нет необходимости устанавливать начальное состояние в componentDidMount, вы можете сделать это прямо в конструкторе. 

constructor(props) {
    super(props);

    this.state = {
      items: [
        {
          name: "Sebastian",
          num: "001"
        },
        {
          name: "Josh",
          num: "002"
        }
      ]
    };

    this.addItem = this.addItem.bind(this);
  }

Чтобы добавить элемент, вы можете использовать функциональную форму setState, и вам нужно будет передать этот элемент в обратный вызов из дочернего компонента. 

addItem(item) {
    this.setState(state => ({
      items: [...state.items, item]
    }));
  }

// Child class
function MethodA(props) {
   return(
      <div>
         {props.items.map((item, i) =>{
            return(<div key={i}>
               <span>{item.name}</span>
               <span>{item.num}</span>
            </div>)
         })}

         <button onClick={() => props.addItem(item)}>ADD ITEM</button> // Pass item to the parent's method
      </div>
   )
}
0 голосов
/ 19 октября 2019

Вот сделка. Разница между push () и concat () заключается в неизменности.

Если вы используете push для массива, он изменит исходный массив и добавит новое значение в этот массив (неверно).

Если вы используете concat, он создаст для вас новый массив, оставив старый массив нетронутым (правильным).

Так что вы можете захотеть сделать что-то вроде этого: 

addItem(item)
  this.setState(state => {
    const items = state.items.concat(item);
    return {
      items,
    };
  });
}
...