Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   Изменить значение в state массива (https://javascript.ru/forum/library-toolkit-framework/75913-izmenit-znachenie-v-state-massiva.html)

dmitry.suhotsky 16.11.2018 14:52

Спасибо, нашел решение

Сам нашел
import React, { Component } from 'react';

export default class Items extends Component {
    handleClick = index => {
        index = index -1;
        if (!this.props.mass[index].click) {
            const list = this.props.mass; //клон mass array
            var item = list[index]; // mass[item] кликнутый итем
            item.like = item.like + 1; //меняем текушее значение на 1
            item.click = !item.click;
            list[index] = item; //обновляем клон
            this.setState({
              mass: list  //обновляем state
            }); 
        }
    }
    render() {
        return(
        <div className="items">
        {this.props.mass.map((i, index) => {
            return (
            <div className="item" key={index}>
                <div className="item__img">
                     <img src={i.img} alt="rose" /> 
                </div>
                <div className="item__text">
                    <p className="item__title">{i.title}</p>
                    <p className="item__hashtag">{i.hashtag}</p>
                    <i className="fa fa-eye"></i><span className="item__viev">{i.viev}</span>
                    <i className="fa fa-heart" onClick={() => this.handleClick(i.id)}></i><span className="item__like">{i.like}</span>
                </div>
            </div>
            )
        })}
        </div>
        );
    }
}


import React, { Component } from 'react';
import Items from './Items';
import RoseImg from '../img/rose.jpg';
import LeafImg from '../img/leaf.jpg';

export default class Main extends Component {
    constructor(props){
        super();
        this.state = {
            mass : [{
                id: 1,
                img: RoseImg,
                title: '1Beautiful mint and glass bowl',
                hashtag: '#beauty #glass #mint #green #white #health',
                viev: 1130,
                like: 30,
                click: false
            },
            {
                id: 2,
                img: LeafImg,
                title: '2Beautiful mint and glass bowl',
                hashtag: '#beauty #glass #mint #green #white #health',
                viev: 1130,
                like: 20,
                click: false
            },
            {
                id: 3,
                img: RoseImg,
                title: '3Beautiful mint and glass bowl',
                hashtag: '#beauty #glass #mint #green #white #health',
                viev: 1130,
                like: 35,
                click: false
            },
            {
                id: 4,
                img: RoseImg,
                title: '1Beautiful mint and glass bowl',
                hashtag: '#beauty #glass #mint #green #white #health',
                viev: 1130,
                like: 30,
                click: false
            },
            {
                id: 5,
                img: LeafImg,
                title: '2Beautiful mint and glass bowl',
                hashtag: '#beauty #glass #mint #green #white #health',
                viev: 1130,
                like: 20,
                click: false
            },
            {
                id: 6,
                img: RoseImg,
                title: '1Beautiful mint and glass bowl',
                hashtag: '#beauty #glass #mint #green #white #health',
                viev: 1130,
                like: 30,
                click: false
            },
            {
                id: 7,
                img: LeafImg,
                title: '2Beautiful mint and glass bowl',
                hashtag: '#beauty #glass #mint #green #white #health',
                viev: 1130,
                like: 20,
                click: false
            }]
        }
    }
  render() {
    return (
      <div className="main">
        <div className="container">
            <h1>World’s most <span className="main__span">amazing</span> test tiles</h1>
            <Items mass={this.state.mass}/>
        </div>
      </div>
    );
  }
}

Nexus 16.11.2018 15:15

dmitry.suhotsky, элементы в state.mass любые 2 поменяйте местами и перестанет работать )


Часовой пояс GMT +3, время: 22:57.