Quiero establecer una matriz múltiple mientras inserto elementos en la matriz. ¿Alguien puede sugerirme cuál es el problema con el código?
import React from "react"; import { render } from "react-dom"; class App extends React.Component { constructor() { super(); this.state = { aArr: [], bArr: [], cArr: [] }; this.someFunction(); } someFunction() { let result = [ { a: 1, b: 2, c: 3 }, { a: 4, b: 5, c: 6 } ]; result.forEach((item) => { this.setState({ aArr: [...this.state.aArr, item.a], bArr: [...this.state.bArr, item.b], cArr: [...this.state.cArr, item.c] }); }); } render() { return ( <div> aArr: {this.state.aArr} bArr: {this.state.bArr} </div> ); } } render(<App />, document.getElementById("root"));la salida final debe ser aArr : 1,4 bArr : 2,5
Está intentando establecer el estado en un bucle forEach. Sin embargo, this.setState() es asíncrono y lleva algún tiempo ejecutarlo. Por lo tanto, no puede configurar datos en el estado. Debe actualizar su resultado en alguna otra variable, luego puede configurar esos datos en su estado. Así es como puedes hacerlo-
class App extends React.Component { constructor() { super(); this.state = { aArr: [], bArr: [], cArr: [] }; let result = [ { a: 1, b: 2, c: 3 }, { a: 4, b: 5, c: 6 } ]; const {aArr, bArr, cArr} = this.state result.map(res => { aArr.push(res.a) bArr.push(res.b) cArr.push(res.c) }) this.setState({aArr, bArr, cArr}); } render() { return <div>aArr: {this.state.aArr.join(', ')} <br/> bArr: {this.state.bArr.join(', ')}</div>; } }useReducer suele ser preferible a useState cuando tiene una lógica de estado compleja que involucra múltiples subvalores o cuando el siguiente estado depende del anterior.