如何从数组中的对象添加新的键和值？

Posted 2023-02-22

【中文标题】如何从数组中的对象添加新的键和值？

【英文标题】：How to add new key and vaule from object inside Array?

【发布时间】：2020-07-10 04:29:38

【问题描述】：

我正在使用 ReactJS 和 Redux，下面的代码显示了我如何在每个对象中添加一个新的 key:value。实际上错误是：

控制台日志：未捕获（承诺中）类型错误：无法读取未定义的属性“0” Web：TypeError：无法读取未定义的属性“0”

从 API 接收到的数据是：

完整代码为：

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);

错误： 错误：超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

【问题讨论】：

你想在每个对象中添加什么属性和值

例如：city: "SPAIN" 这一项适用于所有人。这是一个概念证明。谢谢。

我试过了，这个错误出现了：

错误：超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

不要在循环中使用它...从 api 获取数据后，从我的解决方案中编写代码行

【参考方案1】：

首先，将 setState 放在循环中并不是一个好主意，在这种情况下，您要做的是将一个函数传递给 setState，该函数将接收“先前”（当前）状态。

  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
    ))
  ));

当你试图更新你的状态时，也建议使用这个方法（传递一个函数），根据之前的状态，像这种情况，你正在修改你的数组，这是因为this.setState是异步的如果在这种情况下不使用函数方法，可能会遇到一些问题。

我希望这会有所帮助。

更新：缺少括号，这次我使用了我的编辑器，所以这有效，对此我深表歉意。

【讨论】：

我已经修改了我的答案以匹配您代码中的变量名称

我错过了一对( )，我现在刚刚添加了这些

@Kentron.dna 立即尝试

@Kentron.dna 尝试更新您的帖子，以便我可以帮助您，分享您帖子中的所有代码