當我不希望它時，子組件的 id 已在反應中更新

Question

我對反應還很陌生，我正在嘗試創建嵌套表。 當我只擴展其中一行以獲得嵌套表時，它工作正常，但是當我擴展超過 1 時，它會破壞程序的其他部分，這些部分依賴於子表的唯一 ID。 我希望它看起來像下面這樣：

然而，當我擴展超過 1 個表時，假設為 2，如上例所示，那么第一個表的 id 也將重命名為 childTable1，但我希望它保持為 childTable0。 在下面的代碼中，“父”組件實際上是另一個表組件的子組件，但目前只有一個條目，所以我現在沒有看到任何問題，但無論我得到什么解決方案，我都會使用它所有嵌套表。

        const {datas}=this.state;
        return (
            <React.Fragment>
                <Table className='table table-bordered border-dark hover' id={'ParentTable'}> 
                    <thead>
                        <tr>
                            <th scope='col'>ID</th>
                            <th scope='col'>Name</th>
                            <th scope='col'>Expand</th>
                        </tr>
                    </thead>
                    <tbody>
                        {datas.map((data, index) => 
                            {if (this.props.buttonText[index] === '^')                                 
                            {
                                //table is expanded so return row and child table
                                //tablePath is the index to get there so in the above image
                                //if index = 0 then the path would be [0]
                                //if index = 1 then the path would be [1]
                                //remember this is a child component of another table so it'll most 
                                //likely be [0,0] or [0,1] etc...

                                let tablePath = this.props.tableId;
                                if(tablePath.length < 2)
                                {
                                    tablePath.push(index);
                                }
                                else
                                {
                                    tablePath[1] = index;
                                    if (tablePath.length > 2)
                                    {
                                        //incase if user has expanded child tables also then we want 
                                        //to omit it.

                                        tablePath = tablePath.subarray(0,2);
                                    }
                                }
                                return(<React.Fragment>
                                    <tr className=...} 
                                        onMouseDown={() => ...} 
                                        key={data.ID} 
                                        id={"ParentRow"+data.ID}>
                                            <td >{data.ID}</td>
                                            <td >{data.Name}</td>
                                            <td >
                                                <button 
                                                className = {condition? "button ButtonSelected": "button ButtonNotSelected"}
                                                onClick = {() => this.props.ExpandOrCollapse(...)}
                                            >{this.props.buttonText[index]}</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colSpan='3'>
                                                <Child
                                                ParentID = {data.ID}
                                                ExpandOrCollapse={this.props.ExpandOrCollapse}
                                                index={this.props.index}
                                                buttonText={this.props.buttonText}
                                                tableId = {tablePath}
                                                path = {this.props.path}/>
                                            </td>
                                        </tr>
                                    </React.Fragment>);
                                }
                                else
                                {
                                    //table is collapsed so just return row
                                    return(<React.Fragment>
                                    <tr className=...} 
                                        onMouseDown={() => ...} 
                                        key={data.ID} 
                                        id={"ParentRow"+data.ID}>
                                            <td >{data.ID}</td>
                                            <td >{data.Name}</td>
                                            <td >
                                                <button 
                                                className = {condition? "button ButtonSelected": "button ButtonNotSelected"}
                                                onClick = {() => this.props.ExpandOrCollapse(...)}
                                            >{this.props.buttonText[index]}</button>
                                            </td>
                                        </tr>
                                    </React.Fragment>);
                                }
                            }
                        )}
                    </tbody>
                </Table>
            </React.Fragment>
        );
    }

子組件看起來像：

    {
        const {datas} = this.state;
        return(
            <React.Fragment>
                <Table className='table table-bordered border-dark hover' id={'ChildTable'+this.props.tableId[1]}> 
                    <thead>...

Answer 1

原來問題出在let tablePath = this.props.tableId; 因為this.props.tableID是一個數組，所以應該let tablePath = [...this.props.tableId];