时间戳

首页 > 解决方案 > 如何从数组中的对象添加新的键和值？

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

问题描述

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

控制台日志：未捕获（承诺中）类型错误：无法读取未定义 Web 的属性“0”：类型错误：无法读取未定义的属性“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 限制了嵌套更新的数量以防止无限循环。

标签： arraysreactjsreduxsetstate

解决方案

首先，将 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它是异步的，你可能会遇到一些如果您在这种情况下不使用函数方法，则会出现问题。

我希望这有帮助。

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

推荐阅读