es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo agrego filas a una tabla en React Hooks sin obtener duplicados?

Estoy intentando crear una tabla de datos con react hooks, pero sigo obteniendo filas duplicadas en mi estado. Aquí está la llamada donde obtengo los valores y realizo algunas manipulaciones, y luego llamo a la función para actualizar el estado:

var tableRowIndex = 0;
const CoinTable = () => {
const baseURL = ‘endpoint/’;
const [tableRows, setRows] = useState([] as any);

const getCurrentPrice = async (inputs: any) => {
    const response = await axios.get(`${baseURL}${inputs.currency}/USD`)
    let currentPrice = response.data
    inputs.cryptoPrice = currentPrice.rate;
    let coinsRequired = inputs.amount / inputs.cryptoPrice;
    inputs.amtCrypto = coinsRequired.toFixed(8);
    addNewRow(inputs)
}

Aquí está mi función donde intento actualizar el estado

const addNewRow = (inputs: any) => {
tableRowIndex++
inputs.index = tableRowIndex
setRows([…tableRows, inputs])
}

Estos son el resto de los componentes donde estoy mapeando a través de mis filas y mostrando en mi JSX.

const rows = tableRows.map((row: any) => {
return (
)
})

return (
    <>
        <additem getcurrentprice="{getCurrentPrice}"></additem>
        {tableRows.length > 0 &&
            <table>
                <tbody>
                    <tr>
                        <th>Comerciante</th>
                        <th>Articulo</th>
                        <th>Cantidad (cripto)</th>
                        <th>Moneda</th>
                        <th>Precio/cripto (USD)</th>
                        <th>Cantidad (USD)</th>
                    </tr>
                    {rows}
                </tbody>
            </table>

        }

)

}

export default CoinTable;

Inputs es un objeto que contiene las entradas del usuario para renderizar como una nueva fila. Parece ser un problema en cómo estoy actualizando el estado usando el operador spread, pero no estoy seguro.

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Parece que el problema está en cómo estás actualizando el estado con el operador de propagación. Cuando usas el operador de propagación, agregarás el nuevo elemento al final del array, pero también agregarás los elementos anteriores. Para solucionar esto, puedes usar el método Array.prototype.concat() en su lugar. Esto agregará el nuevo elemento al array sin agregar los elementos anteriores.

    Por ejemplo, puedes actualizar la función addNewRow de la siguiente manera:

    const addNewRow = (inputs: any) => {
        tableRowIndex++
        inputs.index = tableRowIndex
        setRows(tableRows.concat(inputs))
    }
    

    Esto debería solucionar el problema de filas duplicadas en tu estado.

Comments are closed.