Как добавить новый ключ и vaule от объекта внутри массива? - PullRequest
Новая
       11

Как добавить новый ключ и vaule от объекта внутри массива?

0 голосов
/ 29 марта 2020

Я использую ReactJS и Redux, используя приведенный ниже код, показывающий, как я пытаюсь добавить новый ключ: значение в каждый объект. На самом деле ошибка:

Журнал консоли: Uncaught (в обещании) TypeError: Невозможно прочитать свойство '0' с неопределенным Web: TypeError: Невозможно прочитать свойство '0' с неопределенным

Полученные данные из API:

enter image description here

Полный код: 

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

ОШИБКА: Ошибка: превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate. React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов.

1 Ответ

1 голос
/ 29 марта 2020

Прежде всего, наличие вашего setState внутри al oop не очень хорошая идея, в этом случае вы хотите передать функцию 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 является асинхронным, и вы можете столкнуться с некоторыми проблемами, если вы не используете функциональный подход в этих условиях.

Надеюсь, это поможет.

Обновление : отсутствует скобка, на этот раз я использовал свой редактор, так что это работает, я извиняюсь за это.

...