通过单击“按钮”在数组中添加值

Question

我有一个数组。其值为 Objects。 1个数组中有3个值对于 1 个对象.

这是一个 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]
]);

！！！点击【第二次】！！！

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]
]);

！！！点击【第三次】！！！

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]
]);

等等。

Answer 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.log('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