反应带有数组道具错误更新的子组件

Question

My react web app uses Typescript.

I'm having a problem with a child Component with array Props updating incorrectly when the array is updated in the parent with setState.

The child is declared in the parent Component render as follows (Alarms is the child Component, filteredStatus is the array):

<div key={1} className={'1'}>
  <span className='text'><b>{locationName} <i>Status</i></b></span>
  <Alarms filteredStatus={this.state.filteredStatus}/>
</div>

The child displays the array as a table.

public generate = () => {
    return this.props.filteredStatus.map(status =>
    {
      return (
      <TableRow key={status.location}>
        <TableCell align="left">
          {(status.severity === 40) && <ErrorIcon style={{ fill: '#FF3333'}}/>}
          {(status.severity === 30) && <NotificationIcon style={{ fill: 'FFA033'}}/>}
          {(status.severity === 20) && <WarningIcon style={{ fill: 'FFE033'}}/>}
        </TableCell>
        <TableCell align="left">{status.description}</TableCell>
        <TableCell align="left">{status.timestamp}</TableCell>
        <TableCell align="left">{status.location}</TableCell>

        {/* <div className="ListBtn">
          <Tooltip title={"Clear '" + alarm.who + "'"}>
            <Avatar>
              <IconButton aria-label="Delete" onClick={this.openClearAlarmConfirmDialog.bind(this, alarm)} >
                <DeleteIcon />
              </IconButton>
            </Avatar>
          </Tooltip>
        </div> */}
      </TableRow>
      );
    });
  }

  public render() {
    return (
      <div>
        {/* <Paper> */}
          <Table>
            <TableHead>
              <TableCell align="left">Severity</TableCell>
              <TableCell align="left">Description</TableCell>
              <TableCell align="left">Timestamp</TableCell>
              <TableCell align="left">Location</TableCell>
            </TableHead>
            <TableBody>
              {this.generate()}
            </TableBody>
          </Table>
        {/* </Paper> */}
      </div>
    );
  }


filteredStatus is declared in the parent Component state as...

    interface IState {
      dtName: string;
      dtDesc: string;
      dtInfo: IDrivetrainInfo;
      drillDownIndex: number;
      componentName: string;
      navLocations: string[];
      filteredStatus: Status[];
      nullStatus: Status[];
      locationStatus: Status;
    }

Status is a user defined class...


    export class Status {
        public location: string;
        public timestamp: string;
        public severity: number;
        public description: string;
    }

The filteredStatus is updated in the parent from a timer... A new array of Status is created and assigned to the state.filtered status as follows:

this.setState({filteredStatus: this.localStatus});

What happens is that the updated table doesn't correctly show the new array of components. The new array appears to be merged with the old array. I added the size of the array to the child display and at times the size shows 0 while the list shows 15 elements.

I was able to work around this problem by first setting the filteredStatus to a null array, then the new array as follows:

const nullStatus = Array<Status>();
this.setState({filteredStatus: nullStatus});
this.setState({filteredStatus: this.localStatus});

I may be doing something wrong, but this appears to be a problem with the rendering of the array props in the child Component.

Answer 1

The table key...

<TableRow key={status.location}>

was changing based on the status location. The table key must remain constant for the rendering to work correctly.