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

Question

我的React Web应用使用Typescript。

我在使用setState在父级中更新数组时，数组Props的子组件出现问题。

子级在父级Component渲染中声明，如下所示（Alarms是子级Component，filteredStatus是数组）：

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

子级将数组显示为表格。

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

从计时器在父级中更新了filteredStatus ...创建了一个新的Status数组，并将其分配给state.filtered状态，如下所示：

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

发生的情况是，更新后的表未正确显示新的组件数组。 新阵列似乎已与旧阵列合并。 我将数组的大小添加到了子显示中，有时大小显示为0，而列表显示了15个元素。

通过首先将filteredStatus设置为空数组，然后将新数组设置为如下，我能够解决此问题：

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

我可能做错了什么，但这在子Component中呈现数组props似乎是一个问题。

Answer 1

表键...

<TableRow key={status.location}>

正在根据状态位置进行更改。 表键必须保持不变，渲染才能正常工作。