如何正确检查 React 映射中数组的当前索引？

Question

我正在尝试增加特定位置数组的值。假设您有一个数组：

const [cantidad, setCantidad] = useState([
   {cantidadID: 1, value: 1},
   {cantidadID: 2, value: 1},
   {cantidadID: 3, value: 1}
]);

现在我只想用一个按钮更改其中一个（无论哪个）的值

const plus = (e) => {
   setCantidad(cantidad[e] + 1);
};

const minus = (e) => {
   if (cantidad[e] > 0){
      setCantidad(cantidad[e] - 1);

   } else {
      window.alert("Sorry, Zero limit reached");
      setCantidad(0);
   }
};

e 是从 table 发送的数组索引（带有一些智能编码 ofc），非常像这样

{libros.map((l) => (                   
   <tr>
      <td>
         <button onClick={mas} />
         {cantidad}
         <button onClick={menos} />
      </td>

      <td>{l.grado}</td>

      <td>
         <input
            onChange={(event) => {
               let checked = event.target.checked;
            }} 
            type="checkbox"
            checked=""
         >
         </input>
         {l.descripcion}
      </td>

      <td>{l.editorial}</td>
      <td>${parseFloat(l.precio).toFixed(2) * cantidad}</td>
   </tr>
))}

// I know the checkbox is not working. I'm still working through that.

现在在我看来确实有道理，在映射时应该有一个变量控制 cantidad 变量的索引，但是如果我尝试在地图中创建一个新变量，它就会变得疯狂并且它崩溃，（除非我格式化错误或把它放在错误的地方）

所以我得到的逻辑非常简单，但我不知道如何应用它，就像这样：如果在映射时有 X[] 变量，则创建一个控制数组变量 ID 的 Y 变量，并且如果要更改 X[] 中特定值的值，则必须将 X[Y] 变量发送到按钮const plus 和 minus，然后仅从该特定 ID 更改该变量。

在我的完整代码中，我没有使用 3 个值，顺便说一句，这些值等于从地图中获取的数据量

任何提示、数据或信息都非常感谢。如果您需要我的整个代码的实际输入，如果我没有让它工作，请告诉我，我可能会 post 稍后再输入代码。

这是我正在处理的实际代码，即使第一个问题得到了回答，我仍然对下一部分有问题（仅相关部分）

const [amount, setAmount] = useState([1]);

//I know this bit doesn't make sense (Yet) I'm trying to figure out first the first bit
const plus = (index) => {
        setAmount(amount[index] + 1);
      };

      const menos = (index) => {
        if (amount[index] > 0){
            setAmount(amount[index] - 1);
        }
        else {
            window.alert("Sorry, Zero limit reached");
            setAmount(0);
        }
      };

{books.map((l, index) => (
                        
                        <tr >
                        
                        <td>
                            <button onClick = {() => plus(index)}/>
                            {amount[index]}
                            <button onClick = {() => minus(index)}/>
                        </td>
                        <td>{l.grado}</td>

                        <td >
                        <input onChange = {(event) => {
                            let checked = event.target.checked;
                        }} 
                        
                        type="checkbox" checked = "">
                        </input>
                        {l.descripcion}
                        </td>

                        <td >{l.editorial}</td>
                        <td >${parseFloat(l.precio).toFixed(2) * amount[index]}</td>
                        </tr>

                     ))}

这就是打印的方式

我知道在 Javascript 中你可以使用 Array(5).fill(2) 有没有类似的东西？就像我想做 Array(map.length).fill(1) 例如这样值总是以 1 开头然后我所要做的就是使用索引来改变正确的加号和减号.

Answer 1

它是.map函数的第二个参数所以：

libros.map((l, idx)

其中 idx 是您的 i

这是documentation关于它的

Answer 2

您正在根据 index 值而不是实际的 id 值在数组中设置对象。强烈推荐在每个对象中加入一个id，然后通过id抓取对象进行操作。否则，您可能会在操作数组时遇到错误和意外行为。

与使用 map 时不使用数组索引的概念相同：这是一种反模式。

https://reactjs.org/docs/lists-and-keys.html

如何正确检查 React 映射中数组的当前索引？

How to properly check the current Index of an array in a React map?

arrays

reactjs

array.prototype.map