Tengo una siguiente matriz,
const bio = [ {id: 1, name: "Talha", age: 26}, {id: 2, name: "Ayub", age: 22} ]Aquí hay un código completo mío,
import './App.css'; import React, {useState} from 'react'; const bio = [ {id: 1, name: "Talha", age: 26}, {id: 2, name: "Ayub", age: 22} ] const App = () => { const [bioData, setbioData] = useState(bio); const clear_function = () => setbioData([]) return ( <div className="App"> { bioData.map((arr) => <> <h3 key={arr.id}>Name: {arr.name}, Age: {arr.age}</h3> <button onClick={() => clear_function()}>Click me</button> </> )} </div> ); } export default App;Ahora, este código conecta toda la matriz a useState. Cada vez que hago clic en el botón "Hacer clic en mí", establece el estado en una matriz vacía y, como resultado, devuelve una matriz vacía.
Pero, ¿qué pasa si quiero eliminar una fila específica de la matriz? He hecho dos botones, cada uno para una fila. Lo que quiero hacer es si hago clic en el primer botón, también elimina la primera fila de la matriz y mantiene la segunda matriz.
De manera similar, si quiero cambiar un valor de atributo específico de una fila específica, ¿cómo puedo hacerlo usando el enlace useState? Por ejemplo, quiero cambiar el atributo de nombre de la segunda fila . ¿Cómo es posible hacer esto con useState?
Y el mismo caso para la suma. SI hago un formulario y trato de agregar una nueva fila a mi bio matriz, ¿cómo lo haría? Lo busqué en Google, también encontré una publicación similar, pero la respuesta dada no fue satisfactoria y no funcionó, por lo que estoy haciendo esta pregunta nuevamente.
Si entendí bien la pregunta, creo que puede pasar el objeto actualizado para establecer el estado y eso será todo.
Para cambiar un objeto en particular en la matriz, haga algo como esto:
// Update bio data with id = 2 setbioData(prevValue => [...prevValue].map(el => el.id === 2 ? ({...el, name:'new name'}) : el) ) Además, ha configurado la key en el lugar equivocado.
Código refactorizado completo:
const bio = [ {id: 1, name: "Talha", age: 26}, {id: 2, name: "Ayub", age: 22} ] const App = () => { const [bioData, setbioData] = useState(bio); const clear_function = (id) => { setbioData(prevValue => [...prevValue].map(el => el.id === id ? ({...el, name:'new name'}) : el) ) } return ( <div className="App"> { bioData.map((arr) => <div key={arr.id}> <h3>Name: {arr.name}, Age: {arr.age}</h3> <button onClick={() => clear_function(arr.id)}>Click me</button> </div> )} </div> ); }No estoy seguro de entender completamente su pregunta, pero cuando desea cambiar el estado en un componente funcional, no puede cambiar directamente el objeto de estado, sino que necesita crear un nuevo objeto de estado deseado y luego configurar el estado a ese objeto. por ejemplo, si desea agregar una nueva fila a su matriz, deberá hacer lo siguiente:
setbioData((currBioData) => [...oldBioData, {id: 3, name: "Bla", age: 23}]); Cuando desea cambiar el estado en función del estado actual, hay una opción para enviar a la función setState una función de devolución de llamada que acepta el estado actual, y luego, usando el operador de propagación, agregamos una nueva fila a la matriz. No voy a explicar por qué es mejor pasar setState a una función para modificar el estado actual, pero puedes leer sobre esto en los documentos oficiales de React .
Parece que hay 3 preguntas aquí. Haré todo lo posible para ayudar.
"¿Qué pasa si quiero eliminar una fila específica de la matriz?" Una forma es filtrar su matriz actual y actualizar el estado con la nueva matriz. En su ejemplo: onClick={()=>setbioData(arr.filter(row=>row.id !== arr.id))}
"Si quiero cambiar un valor de atributo específico de una fila específica, ¿cómo puedo hacerlo usando el enlace useState?" Deberá crear una nueva matriz con la información correcta y guardar esa matriz en el estado. En su ejemplo: [... bioData, {id:/row_id/,name:/new name/,age:/new age/}]
"SI hago un formulario y trato de agregar una nueva fila a mi matriz biológica, ¿cómo lo haría?" En este caso, insertaría un nuevo objeto en su matriz. En tu ejemplo:
setbioData(previousData=>previousData.push({id:previousData.length+1,name:/new name/,age:/new age/})Espero que esto te ayude, la mejor de las suertes.