0
89
VisualizaçõesuseState / setData no se está actualizando
Estoy tratando de encontrar una manera de filtrar por precio y nombre, pero de alguna manera useState no se actualizará. Imprimí el resultado y funcionó en ambas casillas de verificación. Por cierto, ¿es mejor usar onChange o onClick en la casilla de verificación? Ambos me parecen iguales. He visto muchos tutoriales y buscado muchas soluciones posibles, pero todavía no puedo resolver este problema.
let product = [ { name: "tesla", cost: 500, }, { name: "benz", cost: 1000, }, { name: "honda", cost: 200, }, { name: "apple", cost: 400, }, ]; const [data, setData] = useState(product); const sortbyprice = () => { const result = product.sort((a, b) => { return a.cost > b.cost ? 1 : -1; }); setData(result); console.log(result); }; const sortbyname = () => { const result = product.sort((a, b) => { return a.name > b.name ? 1 : -1; }); setData(result); console.log(data); }; return ( <div className="App"> <div className="sort price"> <h3>Sort by price</h3> <input type="checkbox" className="searchbar" onChange={sortbyprice} ></input> </div> <div className="sort name"> <h3>Sort by name</h3> <input type="checkbox" className="searchbar" onChange={sortbyname} ></input> </div> <div className="product-container"> {data.map((item, index) => { return ( <div className="product" key={index}> <h2>{item.name}</h2> <p>{item.cost}</p> </div> ); })} </div> </div> ); }3 Respostas
Responde à pergunta0
Estoy actualizando mi respuesta para cubrir ambos casos en los que el product está dentro o fuera del componente.
El problema es la mutación de la matriz.
Puede leer más aquí ¿Cómo puede ordenar una matriz sin mutar la matriz original?
La forma correcta es la siguiente y debería funcionar.
const sortbyprice = () => { let dataClone = [...data]; const result = dataClone.sort((a, b) => { return a.cost > b.cost ? 1 : -1; }); setData(result); console.log(result); }; const sortbyname = () => { let dataClone = [...data]; const result = dataClone.sort((a, b) => { return a.name > b.name ? 1 : -1; });Revisa este arenero
0
Debe usar dos variables de estado diferentes para esta casilla de verificación, y al hacer clic en una de ellas, debe actualizar su estado en consecuencia aquí es CodesandBox.
0
Todo esto se ve bien, lo ejecuto en codesandbox y se vuelve a renderizar. Pero de todos modos, le sugiero que mueva la matriz de productos fuera del componente, y solo la use como valor inicial para useState hook, y en la actualización de estado, use el parámetro de entrada de la devolución de llamada setData, por ejemplo: setData (anterior => [... anterior .sort(...)]), no es necesario hacer referencia cada vez a la matriz inicial, ya que ya la usó al llamar al gancho en su componente.