Изменить значение в state массива

@Dim04ka · Регистрация: 16.11.2018

Студворк — интернет-сервис помощи студентам

По нажанию на лайк, должен измениться цвет и увеличится кол-во на +1. Повторное нажание -1.

Компанент для вывода итемов

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React, { Component } from 'react';
export default class Items extends Component {
handleClick = () => {
  };
 
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({index})}></i><span className="item__like">{i.like}</span>
            </div>
        </div>
        )
    })}
    </div>
    );
}

Еще компонент, из которого я передаю значения

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 import React, { Component } from 'react';
import Background from '../img/cyprus-3184019_1920.jpg';
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
            }]
        }
    }
  render() {
    var sectionStyle = {
        width: "100%",
        height: "100%",
        backgroundImage: `url(${Background})`
      };
    return (
      <div className="main" style={ sectionStyle }>
        <div className="container">
            <h1>World’s most <span className="main__span">amazing</span> test tiles</h1>
            <Items mass={this.state.mass}/>
        </div>
      </div>
    );
  }
}

Как я думаю. По клику onClick={this.handleClick} вызывается функция, в которой ({{index}}) передается текущий итем.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1)берется текущий стейт
2) вытягиваем лайк
3) увеличиваем на 1
4) обновляем
 
handleClick = index => {
     const list = this.props.mass; //клон mass array
     const item = list[index]; // mass[item] кликнутый итем
     item.like = 1; //меняем текушее значение на 1
     list[index] = item; //обновляем клон
     this.setState({
         mass: list  //обновляем state
     });
    console.log('Click');
    console.log(this.state.mass[index].like);
}

делаю так и вылетает ошибка TypeError: Cannot set property 'like' of undefined

Добавлено через 2 часа 47 минут
Сам нашел

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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>
        );
    }
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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>
    );
  }
}

@shsv382 · 14.01.2019, 15:49

На первый взгляд тут дело вовсе не в реакте - вы в обработчик события onClick должны передать функцию (читай - имя функции), а вы ее там вызываете! Другими словами у вас в коде должно быть сделано:

JavaScript
1
...onClick={this.handleClick} ...

а сам метод:

JavaScript
1
2
3
handleClick(event) {
  // Работа с event.target
}

как вариант - добавить к элементу <i> dataset-атрибут:

JavaScript
1
2
3
4
5
6
7
<i data-item-index={i.id}>...
// ...
handleClick(event) {
     const list = this.props.mass;
     const item = list[event.target.dataset.itemIndex];
// и пошло-поехало...
}

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .