Estoy usando React Navigation para obtener una matriz llamada additional usando this.props.route.params cuando navego a una página, y cuando represento la pantalla quiero establecer los detalles del estado en el componente de clase con la matriz adicional, yo Todavía soy nuevo en JavaScript y esto es lo que se me ocurrió:
Formación
Array [ Object { "data": Array [ Object { "id": 1.01, "price": 1, "selected": false, "title": "Ranch", "type": "Sides", }, Object { "id": 1.02, "price": 1, "selected": false, "title": "Blue Cheese", "type": "Sides", }, ], "required": false, "type": "Sides", }, Object { "data": Array [ Object { "id": 2.01, "price": 1, "selected": false, "title": "Hot Sauce", "type": "Sauces", }, Object { "id": 2.02, "price": 1, "selected": false, "title": "Medium Sauce", "type": "Sauces", }, ], "required": true, "type": "Sauces", }, ]Pantalla
class DisplayItem extends Component { constructor(props) { super(props); this.state = { sides: [], details: [], } } render() { const { additional } = this.props.route.params; const { sides, details } = this.state; if (additional !== undefined) { sides.forEach((item) => { item['selected'] = false }); additional.forEach((a, i) => { a["data"] = sides.filter(b => b.type == a.type); }); this.setState((details) => {return [...details, additional]}) } Intenté usar ()=>this.setState({details: additional}) pero devuelve solo una matriz vacía, luego probé el método anterior y devuelve el error: TypeError: Invalid attempt to spread non-iterable instance.
Está tratando de difundir una matriz ...details , lo cual no es posible.
¿Puede poner depurador o console.log antes this.setState((details) => {return [...details, additional]}) y puede decirnos qué hay en additional ?
Por cierto en ()=>this.setState({details: additional}) está tratando de establecer un valor additional que probablemente asuma que es una matriz, pero probablemente sea solo un valor de cadena.
Está tratando de difundir todo el estado, que es un objeto, no la parte de la matriz.
Aquí puede destruir la parte de detalles del estado actual antes de distribuirla de esta manera:
this.setState(({details}) => {return [...details, additional]})