如何用相同的值填充数组 X 次以及如何将数据正确发送到函数？

Question

我提出了一个与数组和映射相关的类似问题，但只回答了一半，这就是为什么我将这个问题分开。

我有这个代码（只有相关信息）：

const [libros, setLibros] = useState([]);
const [cantidad, setCantidad] = useState([1]);

//This is not finished because I'm still stuck
const mas = (index, value) => {
        setCantidad(cantidad[index] + 1);
      };

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


<tbody>
     {libros.map((l, index) => (
          <tr >
           <td>
               <button onClick = {() => mas(index)}/>
               {cantidad[index]}
               <button onClick = {() => menos(index)}/>
               </td>
               <td>{l.grado}</td>

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

//I know this check is not working properly I'm strill trying to figure out this one 

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

   ))}
</tbody>

我知道在 javascript 中您可以执行以下操作：

Array(5).fill(2)
//=> [2, 2, 2, 2, 2]

有没有办法在 React 中做类似的事情？因为我想要实现的是： “cantidad”将始终以 1 开头，然后授予用户更改该数量 +1 或 -1 的能力，具体取决于项目 he/she 想要的数量，但我不知道如何设置所有值到 1，话虽如此，在告诉我通过在地图上添加索引值我可以单独控制它们之前，有人已经指导了我我不明白如何在我的代码中应用它，因为我想发送当前索引和该索引的当前值

const mas = (index, value) => {
        setCantidad(cantidad[index] + 1);
      };

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

我制作的函数，这就是打印 atm 的方式，如果您已经在数组中设置了 X 数量的值但不是当值的数量基于地图重复的次数我尝试使用 map.lenght 但没有任何效果 advice/tips 欢迎使用

这是全部代码

import React, { useState, useEffect } from 'react'
import { auth, db } from './firebase';
import { useHistory } from 'react-router-dom';
import { Checkbox } from '@material-ui/core';

function CrearPedidos({user}) {
    const [libros, setLibros] = useState([]);
    const [cantidad, setCantidad] = useState(new Array(libros.length).fill(1);

    const history = useHistory("");
    const [totalPrice, setTotalPrice] = useState();

    const librosRef = db.collection('libros');
    const queryRef = librosRef.where('grado', '==', '4° Grado');

   console.log(queryRef)

    useEffect(() => {
        queryRef.orderBy("precio")
        .get()
        .then((snapshot) => {
              const tempData = [];
            snapshot.forEach((doc) => {
              const data = doc.data();
              tempData.push(data);
            });
            setLibros(tempData);
          });
      }, []);

      const mas = (index) => {
        setCantidad(cantidad[index] + 1);
      };

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

    return (
        <div className="listado_Pedidos"> 
        <div className="estudiantes_container">
            <h1 className = "estudiantes_container_h1">Estudiante: {user.displayName}</h1>
            <h1 className = "estudiantes_container_h1">Libros Nuevos</h1>
            <div className ="tableContainer">
            <table>
                <thead>
                    <tr className="Lista">
                        <th>Cantidad</th>
                        <th>Grado</th>
                        <th>Descripcion</th>
                        <th>Editorial</th>
                        <th>Precio</th>
                    </tr>
                </thead>
                <tbody>
                {libros.map((l, index) => (
                        
                        <tr >
                        
                        <td>
                            <button onClick = {() => mas(index)}/>
                            {cantidad[index]}
                            <button onClick = {() => menos(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) * cantidad[index]}</td>
                        </tr>

                     ))}
                </tbody>
            </table>
            </div>

            <div className="space" />
            <button onClick="{realizarPedidos}" className = "crear_estudiante_boton">Realizar Pedidos</button>
            <div className="space" />
      </div>

      </div>
    )
}

export default CrearPedidos

这是它的样子以及 cantidad 在日志中显示的内容

Answer 1

可以根据libros.length

初始化cantidad数组

const [cantidad, setCantidad] = useState( new Array(libros.length).fill(1) );

const mas = (index) => {
  setCantidad(cantidad[index] + 1);
};

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

Answer 2

您的 setCantidad 方法用法需要设置一个包含增量值的新数组，而不是其中一项的增量值。

您正在使用数组初始化 useState，但后来将其从数组更改为数组中其中一项的值。

具体来说，您正在将 cantidad 初始化为 [1]，这与 new Array(1).fill(1) 相同。但是，您后来将 cantidad 设置为 cantidad[index] + 1，这（假设 index 是 0）将意味着您正在将 cantidad 从 [1] 更改为 2。它从一个带有数字的数组变为只有一个数字。

为了将 cantidad 保持为一个数组，您应该在它发生变化时使用一个新数组来设置它。 setCantidad 只是用新值更新您的状态；它不知道也不关心它是用什么初始化的或以前设置的。

因此，您可以通过多种方式对其进行更新。这是一个建议：

const mas = (index) => {
  cantidad[index] = cantidad[index]++
  // Note how we're setting it with a new array, not the original. 
  // It is important to know how JS references objects (such as arrays) vs other types 
  // by using its pointer as the source of truth vs its pure bytes, respectively
  setCantidad([...cantidad]);
};

const menos = (index, value) => {
  if (cantidad[index] > 0){
    cantidad[index] = cantidad[index]--
    setCantidad([...cantidad]);
  } else {
    window.alert("Sorry, Zero limit reached");
    // no need to do any setting here as the indexed value should already be zero based on the condition above
  }
};

如何用相同的值填充数组 X 次以及如何将数据正确发送到函数？

How to fill an array with the same values X times and how to send the data correctly to a function?

arrays

array-map

reactjs