How to add new key and vaule from object inside Array? - arrays

Question

I am using ReactJSand Redux using the code below show how I am tring to add a new key:value in each object. Actually the error are:
Console log: Uncaught (in promise) TypeError: Cannot read property '0' of undefined
Web: TypeError: Cannot read property '0' of undefined
The data received from the API is:
The complete code is:
import React from "react";
import axios from "axios";
import TableData from "../TableData";
import CustomForm from "../FormCliente";
import Modal from "../Modal";
//Función que conecta un componente a Redux store.
import { connect } from "react-redux";
import { createBrowserHistory } from 'history';
class ClienteList extends React.Component {
state = {
DataFromApi: []
};
fetchArticles = () => {
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
axios.defaults.xsrfCookieName = "csrftoken";
axios.defaults.headers = {
"Content-Type": "application/json",
Authorization: `Token ${this.props.token}`,
};
axios.get("http://192.168.196.49:8000/clientes/api/").then(res => {
this.setState({
DataFromApi: res.data
});
});
}
componentDidMount() {
this.fetchArticles();
}
componentWillReceiveProps(newProps) {
if (newProps.token) {
this.fetchArticles();
}
}
render() {
console.log("Token_desde_connect:", this.props.token);
const history = createBrowserHistory();
const location = history.location;
console.log("debug_1.1: ", location)
const dummy = event => {
console.log('mostrando dummy:', event.target.id);
}
const encabezado = [
{
label: 'Cliente',
field: 'nombre',
sort: 'asc',
width: 150
},
{
label: 'Fecha de alta',
field: 'fecha_alta',
sort: 'asc',
width: 270
},
{
label: 'Usuario ID',
field: 'usuario_id',
sort: 'asc',
width: 270
},
{
label: 'Herramientas',
field: '',
sort: 'asc',
width: 270
}
];
console.log("#-Before-#Data_from_API: ", this.state.DataFromApi);
    // Modificar el array con los datos obtenidos de la API.
    //for (let x in this.state.DataFromApi){
//console.log("#-valor_x:", x, "-#Data_from_API: ", this.state.DataFromApi[x]);
      //this.setState.DataFromApi[x] = Object.assign({ coco: x },this.stateDataFromApi[x] ) ;
      //console.log("#-Inside FOR -#New_Data_from_API: ", this.state.DataFromApi[x] );
//Otra forma de hacer:
//console.log("#-Before-#Data_from_API: ", this.state.DataFromApi);
// Modificar el array con los datos obtenidos de la API.
//let data=this.state.DataFromApi;
//data.forEach( (obj) => obj.city="Spain");
//this.setState({ DataFromApi:data})
    //};
//console.log("#Al finalizar el FOR_ fuera -#New_Data_from_API: ", this.state.DataFromApi );
//this.setState((prevState) => {
// DataFromApi: prevState.DataFromApi.map((obj) => ({
// ...obj,//<- This line will copy the entire object
// myKey: obj.myValue,//<- And this will add/override the property in this obj
// })
//);
this.setState((prevState) => ({
DataFromApi: prevState.DataFromApi.map((x) => ({
...x,//<- This line will copy the entire object
coco: x,//<- And this will add/override the property in this obj
}))
}));
console.log("#-After-#Data_from_API: ", this.state.DataFromApi);
return (
<div>
<Modal requestType="post" btnText="Guardar"/>
<TableData data={this.state.DataFromApi} Encabezado={encabezado}/> <br />
<h2> Create an article </h2>
<CustomForm requestType="post" itemID={null} btnText="Create" />
<button id="dummy" onClick={dummy}>Dummy button</button>
</div>
);
}
}
const mapStateToProps = state => {
return {
token: state.token
};
};
export default connect(mapStateToProps)(ClienteList);
ERROR:
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Answer 1

First of all, having your setState inside a loop is not a good idea, what you want to do in this case is pass a function to setState and that function will receive the "previous" (current) state.
this.setState((prevState) => ({
DataFromApi: prevState.DataFromApi.map((x) => ({
...x,//<- This line will copy the entire object
coco: x,//<- And this will add/override the property in this obj
}))
}));
It's also recommended to use this method (passing a function) when you're trying to update your state, based on the previous state, like this case, you're modifying your array, this is because this.setState is asynchronous and you can run into some problems if you don't use the function approach under this circumstances.
I hope this helps.
Update: Missing parenthesis, I used my editor this time so this works, I apologize about that.