REACTJS:如何在一個地圖內向一個尚未啟動的陣列添加一個鍵？

如果我沒猜錯的話，這應該是創建一個所有值都從1開始的陣列。

但是這就是列印的內容：

但是，由于我只是手動設定 const [cantidad, setCantidad] = useState([1]); 它顯然不會作業，因為只是第一個值，這就是為什么我嘗試之前的代碼 const [cantidad, setCantidad] = useState( new Array(libros.length). fill(1)); 但是很遺憾，這并不奏效(也許我只是漏掉了關鍵部分)，因為這就是它給我的錯誤(雖然我甚至沒有使用li/list)這里它發送給我的基本上是一個串列/關鍵資訊，但是似乎那個關鍵相當于我在開始時給出的 "索引 "值

不管怎樣，我們的想法是用兩個函式來增加數字的數量/antidad，這兩個函式叫做mas和menos，很簡單，如果你點擊左邊的按鈕，它就會增加 1，如果是右邊的按鈕，它就會增加-1，我想這是正確的。

const mas=（index）=> {
        setCantidad(cantidad[index]   1) 。
      };

      const menos=（index）=> {
        if（cantidad[index] > 0）{
            setCantidad(cantidad[index] - 1) 。
        }
        else {
            window.alert("對不起，達到零點限制")。
            setCantidad（0）。
        }
      };

最后，這就是我列印表格的方法

這就是控制臺日志所顯示的。

我讀過array和map，我了解常規情況下的基礎知識，但沒有看到與我當前情況類似的例子，希望得到幫助/提示，以下是我的實際代碼（整個代碼）：

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

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(cantidad)

    useEffect(() => {
        queryRef.orderBy("precio"/span>)
        .get()
        .then((snapshot) =>  {
              const tempData = [] 。
            snapshot.forEach((doc) =>/span> {

              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("對不起，達到零點限制")。
            setCantidad（0）。
        }
      };

    return (
        <div className="listado_Pedidos"/span>> 
        <div className="estudiantes_container"/span>>
            <h1 className = "estudiantes_container_h1">/span>Estudiante: {user. displayName}</h1>Estudiante: {user.
            <h1 className = "estudiantes_container_h1" > Libros Nuevos</h1>。
            <div className ="tableContainer"/span>>
            <table> 
                <thead> 
                    <tr className="Lista"> 
                        <th>/span>Cantidad</th>
                        <th>/span>Grado</th>/span>
                        <th>/span>Descripcion</th>/span>
                        <th>編輯部</th>/span>
                        <th>/span>Precio</th>/span>
                    </tr>/span>
                </thead>/span>
                <tbody>/span>
                {libros.map((libros, index) => (
                        <tr>
                        <td>/span>
                            <button onClick = {（） => mas（index）}/>
                            {cantidad[index]}
                            {console.log(cantidad)}}
                            {console.log([index])}
                            <button onClick = {（） => menos(index)}/>
                        </td> 
                        <td>{libros.grado}</td>/span>

                        <td>/span>
                        <input onChange = {（event） => {
                            讓checked = event.target.checked。
                        }} 
                        
                        type="checkbox" checked = "">
                        </input> 
                        {libros.descriptionpcion}
                        </td> {libros.descripcion}

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

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

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

      </div>>
    )
}

export default CrearPedidos

我知道我最近一直在做很多問題，但我想學習和練習所有我可以做的事情，哦，我的資料庫使用Firebase，唯一不是來自資料庫的值是cantidad/amount，所有其他的grado/course descripcion/description等都來自資料庫，這就是為什么我沒有遇到這些問題。

uj5u.com熱心網友回復：

你的問題有點不清楚，但我在你的代碼中發現了以下問題。

你正在使用另一個狀態libros來設定cantidad狀態的默認值，但它只會在你的組件第一次渲染時被設定一次。 所以你應該在這里使用useEffect鉤子來更新cantidad，只要libros發生變化。

useEffect(（）=>{
  setCantidad(new Array(libros. length).fill（1）)
}, [libros])

在回圈處理一些陣列和渲染組件串列時，總是使用鍵。

{libros.map((libros, index) => //span> (
    <tr key={libros.id || index}>/span>
      ...
    </tr>
)}

標籤：

上一篇：我怎樣才能通過認證來請求FirebaseRESTapi來獲取已登錄用戶的Firebase專案串列？

下一篇：如何在cypressapi自動化測驗中獲取、存盤和重用firebase令牌