Добавление значения в массив нажатием кнопки

У меня есть массив. Это имеет значение объектов. В 1 массиве для 1 объекта есть 3 значения.

Это проект ReactJS.

Например так

const x = useMemo(() => [

[1, 1, 1],
[2, 2, 2],
[3, 3, 3],
[4, 4, 4],
[5, 5, 5],

]);

Теперь у меня есть кнопка.

Мой вопрос: «Как или какую функцию я могу добавить к своей кнопке, чтобы она изменила среднее значение [1] каждого массива»

Например: после нажатия кнопки я хочу добавить [ - 0,5 * 2 ] в среднее значение.

!!! Нажмите !!!

const x = useMemo(() => [

[1, 1, 1],
[2, 2, 2],
[3, 3, 3],
[4, 4, 4],
[5, 5 - 0.5 * 2, 5],
[6, 6 - 0.5 * 2, 6]
]);

!!! Нажмите [2-й раз] !!!

const x = useMemo(() => [

[1, 1, 1],
[2, 2, 2],
[3, 3 - 0.5 * 2, 3],
[4, 4 - 0.5 * 2, 4],
[5, 5 - 0.5 * 2, 5],
[6, 6 - 0.5 * 2, 6]
]);

!!! Нажмите [3-й раз] !!!

const x = useMemo(() => [

[1, 1 - 0.5 * 2, 1],
[2, 2 - 0.5 * 2, 2],
[3, 3 - 0.5 * 2, 3],
[4, 4 - 0.5 * 2, 4],
[5, 5 - 0.5 * 2, 5],
[6, 6 - 0.5 * 2, 6]
]);

и так далее.

Что должно произойти в 4-й раз? В первые 3 раза все средние значения могли быть преобразованы, поэтому интересно, не должно ли преобразование происходить в 4-й раз?

Sandeep Amarnath 10.01.2023 15:51

@SandeepAmarnath После первых 3 раз он переходит в положение по умолчанию.

Azmee Ahmed 10.01.2023 16:14
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
92
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

import { useState } from 'react';

export default function DemoPage() {
  const [positions, setPositions] = useState([
    [1, 1, 1],
    [2, 2, 2],
    [3, 3, 3],
    [4, 4, 4],
    [5, 5, 5],
  ]);
  const targetIndex = positions.length - 1;

  const clickHandle = () => {
    const nextPositions = positions.map((items, index) => {
      if (targetIndex === index) {
        // If there are more array items, you can use `.map` .
        // return items.map((value) => value * 2);
        return [items[0], (items[1] - 0.5) * 2, items[2]];
      }
      return items;
    });

    setPositions(nextPositions);
    console.info('positions :>> ', positions);
  };
  return (
    <div>
      <p>position is { positions[targetIndex].join(',') }</p>
      <button type = "button" onClick = {clickHandle}>Click</button>
    </div>
  );
}

Чтобы обновить массив, смотрите здесь: https://beta.reactjs.org/learn/updating-arrays-in-state#replacing-items-in-an-array

Рекомендуется использовать «use-immer», что упрощает обновление данных.

использование-иммер: https://www.npmjs.com/package/use-immer

Могу ли я сделать это без использования «useState»?

Azmee Ahmed 10.01.2023 16:10

Вот актуальные проблемы, как видите, я хочу изменить значение «позиций» codeandbox.io/s/5thhhhhhhhhh-30q7f2?file=/src/components/…

Azmee Ahmed 10.01.2023 16:12

Я хотел бы спросить, почему вы хотите использовать «useMemo», я немного смущен вашими потребностями? beta.reactjs.org/reference/react/useMemo

Simao 10.01.2023 16:37

Пожалуйста, посмотрите код, который я прикрепил к ссылке. Тогда вы поймете, почему я использую «useMemo». Я использую «useMemo», чтобы изменить положение комнаты. Но я не знаю других простых способов сделать это. Но если у вас есть другое решение для «useState» вместо «useMemo», сообщите мне, пожалуйста :) Спасибо!

Azmee Ahmed 10.01.2023 16:50

Извините, я не ясно выразил свои сомнения, "useMemo" - это хук, который кэширует результат вычисления, пожалуйста, проверьте документы в предыдущем комментарии для деталей, один из его параметров - реактивное значение, поэтому я прочитал ваш код и Я до сих пор не знаю ваших потребностей, можете ли вы подробно описать свои требования и предоставить минимальный вариант использования?

Simao 10.01.2023 17:18

Я пытался использовать ваш код, но он не работает или, возможно, не отображается в режиме реального времени/демонстрации. Нужно ли использовать «useEffect»? И, кстати, мне нужно изменить положение комнаты с помощью «useState» или «useMemo» или любым другим способом. Вот код, в котором я использую вашу функцию: codeandbox.io/s/4-thhhhhhhhhhhh-zpi03t?file=/src/component‌​s/…

Azmee Ahmed 10.01.2023 17:40

Теперь все работает нормально, проблема была в том, что "useState" не вступало в силу при обновлении значений в массиве, см.: beta.reactjs.org/learn/… , я заменил его на более простой "useImmer" для обновления данные, код здесь: codeandbox.io/s/4-thhhhhhhhhhhhh-forked-ocmu2z?file=/src/…

Simao 10.01.2023 19:25

Спасибо! Как я могу добавить его в качестве петли для остальных комнат? На данный момент он работает для комнаты номер 8, поэтому я хочу зациклить его для всех комнат. Ваша помощь будет очень признательна.

Azmee Ahmed 10.01.2023 20:34

Вам просто нужно просмотреть обновленные данные, см. здесь: codeandbox.io/s/4-thhhhhhhhhhhh-forked-ocmu2z?file=/src/…

Simao 10.01.2023 21:28

Я хотел зациклить их один за другим, как вы показали предыдущий, но они были только для комнаты «номер 8», поэтому я хотел попробовать таким образом для каждой комнаты. Например: если я нажму «кнопку 2», то «номер 8» опустится, а если я снова нажму на нее, то «комната 7» опустится, а затем снова и снова.

Azmee Ahmed 10.01.2023 21:48

Уменьшение индекса — это нормально. codeandbox.io/s/4-thhhhhhhhhhhh-forked-ocmu2z?file=/src/…

Simao 11.01.2023 05:33

Давайте продолжим обсуждение в чате.

Simao 11.01.2023 05:53

@ Симао, не могли бы вы проверить этот вопрос? stackoverflow.com/questions/75124249/…

Sayedul Karim 15.01.2023 11:52

Другие вопросы по теме