Рубрики
MobX React React основы

Иммутабельность данных

import React from 'react';

export default class extends React.PureComponent{
state={
numbers:[]
}
add=()=>{
let numbers=[...this.state.numbers];
let value = Math.floor(Math.random()*10)+1;
numbers.push({value,someProp:1,otherProp:2})
this.setState({numbers});
}

double(i){
let numbers=[...this.state.numbers];
numbers[i]={...numbers[i],value:numbers[i].value*2};
this.setState({numbers});
}

render(){
let numbersList=this.state.numbers.map((number,i)=>{
return <li className="list-group-item"
key={i}
onClick={()=>this.double(i)}>
{number.value}
</li>
});

return (
<div>
<button type="button" className="btn btn-primary" onClick={()=>this.add()}>Add</button>
<hr/>
<ul className="list-group">
{numbersList}
</ul>
</div>
)
}
}

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *