React 表排序不一致，它不断变回默认状态

Question

当用户单击表头时，我正在处理此反应表排序，它需要对表进行排序，排序正常，但问题是我每秒通过 SignalR 集线器接收新数据，它设置状态 @987654321 @ 到新数据。当用户单击表头时，它会对表进行排序，但又会返回到由新数据更改的新状态。并将已排序的表取消为未排序的。

有什么方法可以保持排序状态并仍然接收数据？

constructor() {
    super()
    this.state = {
        udata: []
    }

    this.onSort = this.onSort.bind(this)

    let connection = new signalR.HubConnectionBuilder()
        .withUrl("/signalserver")
        .build();

    connection.start().then(function () {
    }).catch(function (err) {
        return console.error(err.toString());
    });
    connection.on("APIDataChannel", function (data) {
        this.setState({ udata: data });
        // console.log(data);
    }.bind(this));

    async function start() {
        try {
            await connection.start();
            console.log("connected");
        } catch (err) {
            console.log(err);
            setTimeout(() => start(), 5000);
        }
    };

    connection.onclose(async () => {
        await start();
    });

}

renderItem(item, key) {
    const itemRows = [
        <tr onClick={clickCallback} key={"row-data-" + key}>
            <td>{item.appName}</td>
            <td>
                <h6 className="text-muted"><i className={"fa fa-circle text-c-" + (item.appState === 'STARTED' ? 'green' : 'red') + " f-10 m-r-15"} />{item.appState}</h6>
            </td>
            <td>{item.spaceName}</td>
            <td>
                <h6 className="text-muted">{item.orgName}</h6>
            </td>
            <td>
                <h6 className="text-muted">{new Date(item.appUpdatedAt).toLocaleString()}</h6>
            </td>
        </tr>
    ];

    return itemRows;
}


onSort(event, sortKey) {
    const data = this.state.udata;
    data.sort((a, b) => a[sortKey].localeCompare(b[sortKey]))
    this.setState({ data })
}


render() {

    let allItemRows = [];

    this.state.udata.forEach((item, key) => {
        const perItemRows = this.renderItem(item, key);
        allItemRows = allItemRows.concat(perItemRows);
    });

    return (
        <Aux>
            <Row>
                <Table hover responsive>
                    <thead>
                        <tr>
                            <th onClick={e => this.onSort(e, 'appName')}>App Name</th>
                            <th>State</th>
                            <th>Space</th>
                            <th>Organization</th>
                            <th onClick={e => this.onSort(e, 'appUpdatedAt')}>Updated At</th>
                        </tr>
                    </thead>
                    <tbody>
                        {allItemRows}
                    </tbody>
                </Table>
            </Row>
        </Aux>
    );
}

Answer 1

我明天也许可以提供更多帮助。我现在正在使用一台坏了一半的笔记本电脑。

这是一个基本的想法，我的语法可能有点不对。

//might need better default values for sortEvent and sortKey
this.state = {
    udata: [],
    sortEvent: {},
    sortKey: ''
}

connection.on("APIDataChannel", function (data) {
  this.setState({ udata: data });
  // I'm not sure about sortEvent in this context
  onSort(this.state.sortEvent, this.state.sortKey);
  //may need to be a callback like:
  this.setState({ udata: data },onSort(this.state.sortEvent, this.state.sortKey));
   // console.log(data);
}.bind(this));

onSort(event, sortKey, data) {
    this.setState({
      sortEvent: event,
      sortKey: sortKey 
     });
    const data = this.state.udata;
    data.sort((a, b) => a[sortKey].localeCompare(b[sortKey]))
    // I'm not sure what this is doing:
    this.setState({ data })
}

<th onClick={e => this.onSort(e, 'appName', this.state.udata)}>App Name</th>

如果您最终每次都调用它，我也只会在 sort 中设置状态。也许也传递数据。所以：

//might need better default values for sortEvent and sortKey
this.state = {
    udata: [],
    sortEvent: {},
    sortKey: ''
}

connection.on("APIDataChannel", function (data) {
  // one onSort call
  onSort(this.state.sortEvent, this.state.sortKey, data);
   // console.log(data);
}.bind(this));

onSort(event, sortKey, data) {
    data.sort((a, b) => a[sortKey].localeCompare(b[sortKey]))
    // Set the state of everything once:
    this.setState({
      sortEvent: event,
      sortKey: sortKey,
      udata: data 
     });
}
<th onClick={e => this.onSort(e, 'appName', this.state.udata)}>App Name</th>

我总是三思而后行。我真的不会将数据保存到状态。我做：

//might need better default values for sortEvent and sortKey
this.state = {
    sortEvent: {},
    sortKey: ''
},
this.data = [];

connection.on("APIDataChannel", function (data) {
  this.data = data;
  // one onSort call
  onSort(this.state.sortEvent, this.state.sortKey);
   // console.log(data);
}.bind(this));

onSort(event, sortKey) {
    this.data.sort((a, b) => a[sortKey].localeCompare(b[sortKey]))
    // Set the state of everything once:
    this.setState({
      sortEvent: event,
      sortKey: sortKey,
      //if you really need to set data to state you could do it here
      udata: data 
     });
}
<th onClick={e => this.onSort(e, 'appName')}>App Name</th>