Question

我一直反对这个问题已经够久了，我什至不确定我是否会看到一个明显的问题。

App 有行，每一行都有不同大小的单元格。添加行有效。添加单元格有效。但是，删除行不会。如果我单击第 0 行的删除按钮，第 2 行就会消失。如果我单击第 1 行的按钮，第 2 行就会消失。查看反应开发工具，似乎在引擎盖下右行被删除（处于状态），右行被选中进行删除，但无论如何它都不会以我期望的方式呈现（如果我点击删除第 0 行，例如第 0 行消失）。

如果我从最高行向下删除它可以工作，但如果我从第零行开始它不会让自己被删除。

App 类的deleteRowButtonHandler 是我一直在努力的地方。

deleteRowButtonHandler( e )
        {
            const targetRow = parseInt( e.target.id ) 
console.log( "TARGETING: ", targetRow )

            const currentRows = this.state.rows

            let newArray = []
            currentRows.forEach( entry =>
            {
                console.log( "Looking at ", entry.id )
                if( entry.id == targetRow )
                    console.log( 'skipping entry with id', entry.id )
                else
                    newArray.push( entry )
            })

            console.log( newArray )
            this.setState( {rows: newArray})
            //let newRows = currentRows.filter( thisRow => {console.log( thisRow.id + ' and the target ' +  targetRow);
             //   if( thisRow.id == targetRow )
             //   {
             //       console.log( thisRow )
             //       console.log( '...is the row that we are trying to delete' )
            //    }

            //    return thisRow.id !== targetRow} 
            //) 
            //this.setState( {rows: newArray}, console.log( "NEW STATE:", this.state ))
        }

我尝试了一些变体（过滤器、拼接、在几行中完成、在很多行中完成等），所以我目前对那段代码并不特别感到自豪。

>

https://codepen.io/philipvdg/pen/mdmmWLG 是代码；任何指向正确方向的指针将不胜感激。

更新一般来说，问题是我（作为一个新手）不明白构造函数只运行一次。在子组件的构造函数中，我使用了 this.cells = this.props.cells，然后在渲染方法中调用了 this.cells.map( ... )。由于构造函数只运行一次，this.cells 在状态更改后永远不会更新。

Answer 1

在 Controls 渲染中，您应该添加行 const id = row.id; 使其如下所示：

this.props.rows.map( 
   ( row ) => {
     const id = row.id; 
    let rowId = 'controlRow' + id

使用数组 idx 是错误的。您应该使用数据结构中的 idx。

Answer 2

它以某种方式获得了重复的 ID。

Looking at  3
    pen.js:74 Looking at  4
    pen.js:81 (4) [{…}, {…}, {…}, {…}]
    pen.js:225 TEMPLATE PROPS:  {rows: Array(4)}rows: Array(4)0: {cells: Array(0), id: 0}1: {cells: Array(1), id: 3}2: {cells: Array(0), id: 3}3: {cells: Array(0), id: 4}length: 4__proto__: Array(0)__proto__: Object
    pen.js:232 row 0 is {cells: Array(0), id: 0}
    pen.js:232 row 1 is {cells: Array(1), id: 3}
    pen.js:232 row 2 is {cells: Array(0), id: 3}
    pen.js:232 row 3 is {cells: Array(0), id: 4}

// in newRowButtonHandler
this.setState( { rows: [ ...this.state.rows, {cells:[], id: this.state.rows.length} ] } )

// try this
    this.setState( { rows: [ ...this.state.rows, {cells:[], id: Math.round(Math.random() * 1000000)} ] }) )

UPD id 的问题，渲染和删除函数使用不同的值集。 https://codepen.io/Asmyshlyaev177/pen/yLbXBGo?editors=0010

不应该使用e.target.id，应该是单一事实来源，例如反应状态。

React - 删除存储在状态中的数组元素会删除错误的元素

2 个答案: