columns should be added only after I select the checkboxes

问题

• I have a table with mock data.
• to that table I am planning to add new columns.
• in the right hand side corner you will see an icon.
• when you click the icon a menu opens with column names.
• at the bottom of columns need to be addedyou will see columns to be added.
• right now on load of the page itself all the columns are visible.
• but the columns should be added only after I select the checkboxes.
• for this I created a method called 'showNewColumns'
• but when I try to call this method application is breaking
• columns should show only after I selec the checkbox and it should hide after I uncheck
• can you tell me how to fix it.
• providing my code snippet and sandbox below.

https://codesandbox.io/s/material-demo-j58b4

with api integrated https://codesandbox.io/s/material-demo-o8wb4

demo.js

const headCells = [
  {
    id: "name",
    numeric: false,
    disablePadding: true,
    label: "Dessert (100g serving)"
  },
  { id: "calories", numeric: true, disablePadding: false, label: "Calories" },
  { id: "fat", numeric: true, disablePadding: false, label: "Fat (g)" },
  { id: "carbs", numeric: true, disablePadding: false, label: "Carbs (g)" },
  { id: "protein", numeric: true, disablePadding: false, label: "Protein (g)" },
  {
    id: "New Column 1",
    numeric: true,
    disablePadding: false,
    label: "Protein (g)"
  },
  {
    id: "New Column 2",
    numeric: true,
    disablePadding: false,
    label: "Protein (g)"
  }
];



const showNewColumns = cols => {
    console.log("showNewColumns hideColumns resultRows--->", resultRows);
    let resultRows = initialRows.slice().map(row => {
      let result = {};
      let keys = Object.keys(initialRows[0]);

      console.log("showNewColumns hideColumns keys--->", keys);

      for (let key of keys) {
        console.log("showNewColumns hideColumns row[key]--->", row[key]);
        console.log("showNewColumns hideColumns result[key]--->", result[key]);
        console.log(
          "showNewColumns hideColumns cols.includes(key)--->",
          cols.includes(key)
        );
        console.log(
          "showNewColumns hideColumns !cols.includes(key)--->",
          !cols.includes(key)
        );

        if (!cols.includes(key)) result[key] = row[key];
      }

      // for (let key of keys) {
      //   if (!cols.includes(key)) result[key] = row[key];
      // }
      return result;
    });

    console.log("showNewColumns hideColumns  resultRows--->", resultRows);

    // TODO: remove from headers as well
    setRows(resultRows);
  };


   <EnhancedTableToolbar
          numSelected={selected.length}
          hideColumns={hideColumns}
          showNewColumns={showNewColumns}
        />

          if (isChecked) {
      let resultList = hideList.slice();
      console.log("hideColumns resultList--->", resultList);
      resultList.push(event.currentTarget.value);
      setHideList(resultList);
      props.hideColumns(resultList);
      //showNewColumns

      console.log("hideColumns showNewColumns resultList--->", resultList);
      // props.showNewColumns(resultList);
    } else {
      // TODO: remove from result list
    }
  };

来源：https://stackoverflow.com/questions/58355185/columns-should-be-added-only-after-i-select-the-checkboxes