0

I am pushing the same object to both a local array and an imported array in React, as follow:

import { EVENTS_DRAFT } from "../../store/stateless/event_draft";
...
        EVENTS_DRAFT.push({ //<=== imported array
          howmanykeys: "random string",
        });
        
        let EVENTS_DRAFT_LOCAL = ['EVENTS_DRAFT_LOCAL'];
        EVENTS_DRAFT_LOCAL.push({
          howmanykeys: "random string",
        })

As per console.log below, the EVENTS_DRAFT_LOCAL works as expected, but the imported EVENTS_DRAFT gives this "broken" array object with a seemly length of 2, but then has really 5 items when expanded.

enter image description here

If I push a string instead of an object, both arrays works as expected. I cannot reproduce this in a regular node app, so I suspect it may have to do with React's diffing algorithm, but really not sure.

getCreateTasks.js

import { EVENTS_DRAFT } from "../../store/stateless/event_draft";

const getCreateTasks = (calDate) => {
  EVENTS_DRAFT.push({
    howmanykeys: "random string",
  });

  let EVENTS_DRAFT_LOCAL = ["EVENTS_DRAFT_LOCAL"];
  EVENTS_DRAFT_LOCAL.push({
    howmanykeys: "random string",
  });

  console.log("EVENTS_DRAFT_LOCAL:");
  console.log(EVENTS_DRAFT_LOCAL);

  console.log("");

  console.log("EVENTS_DRAFT:");
  console.log(EVENTS_DRAFT);
};

export default getCreateTasks;

event_draft.js

export const EVENTS_DRAFT = ['EVENTS_DRAFT'];

full code on github here. https://github.com/SeanLuo-FSWD/RTFEJS.git

Sean
  • 324
  • 2
  • 14
  • 1
    There's nothing broken about `EVENTS_DRAFT`. It had two entries when you logged it with `console.log`. It got three more before you expanded it in the console, so the console showed you all five it had when you expanded it (the console keeps a live link to the array, not a snapshot). See the linked question's answers for details. – T.J. Crowder Oct 13 '21 at 16:22

0 Answers0