React.useState() 的问题

Question

I don't understand why a new row doesn't appear after I press the button. Output through console.log shows that row was added to tables var correctly. Other question is why I can see that new row was added to table even in output of console.log(tables) commented with // 1? This output happens before I add the row.

Code got messed up after pasting here, hope it is still readable.

function Development() {
  const classes = useStyles();

  const [tables, setTables] = React.useState([
    {
      tableName: 'Table1',
      rows: [
        {
          colId: 1,
          primaryKey: 11,
          colName: 'Name1',
          datatype: 'Type1',
          length: 111,
          nulls: 'n1'
        }, 
        {
          colId: 2,
          primaryKey: 22,
          colName: 'Name2',
          datatype: 'Type2',
          length: 222,
          nulls: 'n2'          
        }
      ]
    }, 
    {
      tableName: 'Table2',
      rows: [
        {
          colId: 3,
          primaryKey: 33,
          colName: 'Name3',
          datatype: 'Type3',
          length: 333,
          nulls: 'n3'
        }, 
        {
          colId: 4,
          primaryKey: 44,
          colName: 'Name4',
          datatype: 'Type4',
          length: 444,
          nulls: 'n4'          
        }
      ]
    }
  ]);

  const addRow = () => {
    console.log(tables); // 1
    var tempList = tables;

    tempList.some((table) => {
      if (table.tableName === "Table1") {
       table.rows.push({colId: 5, primaryKey: 55, colName: 'Name5', datatype: 'Type5', length: 555, 
       nulls: 'n5'});
      }
    });
    setTables(tempList);
 }


  return (
    <div>
    <Card className={[classes.mainCard, classes.card].join(' ')}>
      {tables.map((tb) => {
        var rows = tb.rows.map(function(row) {
          return (
              <TableRow key={row.colId}>
                <TableCell component="th" scope="row">
                  {row.colId}
                </TableCell>
                <TableCell>{row.primaryKey}</TableCell>
                <TableCell>{row.colName}</TableCell>
                <TableCell>{row.datatype}</TableCell>
                <TableCell>{row.length}</TableCell>
                <TableCell>{row.nulls}</TableCell>
              </TableRow>
          )
        });

    return (
      <TableContainer component={Paper}>{tb.tableName}
        <Table className={classes.table} aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell>COL ID</TableCell>
              <TableCell>PRIMARY KEY</TableCell>
              <TableCell>COLNAME</TableCell>
              <TableCell>DATATYPE</TableCell>
              <TableCell>LENGTH</TableCell>
              <TableCell>NULLS</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows}
          </TableBody>
        </Table>

      </TableContainer> 
    )
  })} 
</Card>
<Button className={classes.btn2} color="primary" variant="outlined" onClick={addRow}>Add Row</Button>
</div>
  );
}

Answer 1

The problem is that you are not updating the tempList array after you push to it. Using some is not the best approach, I think using map would be better because it returns a new array and you can update the content in the callback.

const addRow = () => {
  console.log(tables); // 1
  // You should return the updated array after pushing
  const updatedTable = tables.map((table) => {
    if (table.tableName === "Table1") {
      // Push into this table's child
      table.rows.push({
        colId: 5,
        primaryKey: 55,
        colName: 'Name5',
        datatype: 'Type5',
        length: 555,
        nulls: 'n5'
      });
    }

    // Return the element of the array
    return table;
  });

  setTables(updatedTable);
}