javascript - 在react中从父组件中删除多个子组件

Question

这个问题已经有答案了:

list items are not deleting properly (React) (1 个回答)

已关闭 4 年前。

我是新来的 react 。我正在尝试构建我的第一个简单应用程序，其中应包含一些投资组合，并且每个投资组合应包含一些股票。我想添加能够从投资组合中删除所有选定股票的功能。我尝试实现该功能，但程序的行为很奇怪。渲染股票时，它不会反射(reflect)执行的删除，但它只是不显示最后的股票(即，如果删除其中两个)。

class Stock extends  React.Component{

    constructor(props)
    {
        super(props);
        this.state = {
            name: this.props.name,
            unit_value: this.props.unit_value,
            quantity: this.props.quantity,
            total_value: this.props.total_value,
            selected: false
        }
    }

    isSelected = () =>
    {
        var isSelected = this.state.selected;
        isSelected = !isSelected;
        this.setState({selected: isSelected});
        this.props.selected(this.props.index);
        console.log("you selected me!"+this.props.index)
    };

    remove = () =>
    {
        console.log("I am removing stock with index: "+this.props.index);

        this.props.deleteStock(this.props.index)

    };

    render()
    {
        return (
         <tr>
           <td>{this.state.name}</td>
           <td>{this.state.unit_value}</td>
           <td>{this.state.quantity}</td>
           <td>{this.state.total_value}</td>
           <td><input type={'radio'} onChange={this.isSelected}/></td>
         </tr>
        )
    }
    }


class Portofolio extends React.Component{

    constructor(props)
    {
        super(props);

        let sum = () =>{
            let stocksSum = 0.0;
            let stocks = this.props.stocks;
            console.log(stocks);
            for(let s in stocks)
            {
                stocksSum = stocksSum + stocks[s]['total_value']
            }

            return parseFloat(stocksSum).toFixed(2);
        };

        this.state = {
            editing: false,
            selected: [],
            stocks: this.props.stocks,

            total: sum()
        }

    }

    deleteStock = (i) => {

        console.log("Removing stock: "+i);
        var arr = this.state.stocks;
        arr.splice(i,1);
        this.setState({stocks: arr})

    };


    deleteStocks = () =>
    {
        let selectedItems = this.state.selected;
        console.log("this items to remove");
        console.log(selectedItems);
        let stocks = this.state.stocks;
        for (let a in selectedItems)
        {
            //stocks.splice(selectedItems[a]-a,1)
            this.deleteStock(selectedItems[a]-a);
            console.log("removed: "+selectedItems[a])
        }

        //this.setState({stocks: stocks})

        console.log("stocks after removal:")
        console.log(stocks)

        let sum = () =>{
            let stocksSum = 0.0
            let stocks = this.state.stocks
            for(let s in stocks)
            {
                stocksSum = stocksSum + stocks[s]['total_value']
            }

            return parseFloat(stocksSum).toFixed(2);
        }

        this.setState({total: sum()})
    }

    remove = () =>
    {
        this.props.deletePortofolio(this.props.index)
    };

    selected = (i) => {
        let arr = this.state.selected
        if (arr.indexOf(i) == -1)
        {
            arr.push(i)
        }
        else
        {
            arr = arr.filter(item => item !== i)
        }

        this.setState({selected: arr})

        console.log(arr)
    }

    eachStock(text,i)
    {
        return (
            <Stock key={i} index={i}
                         name={text['name']} unit_value={text['unit_value']} quantity={text['quantity']}
                       total_value={text['total_value']} selected={this.selected} remove={this.deleteStock}>
            </Stock>
        )
    }

    renderNormal = () =>
    {
        const style = {
            border_bottom: '1px solid #ddd'
        };
        return (
            <div className={'portofolio'}>

                <a  onClick={this.remove} className="close-thik"></a>
                <p/><p/><br/>

                <div> {this.props.children}
                    <div className={'divider'}></div>
                    <label>Show in €</label>
                    <div className={'divider'}></div>
                    <label>Show in $</label>
                </div>
                <p/>
                <br/>

              <table style={{border: '1px solid black'}}>
                  <tbody>
                  <tr style={{border: '1px solid black'}}>
                      <th>Name</th>
                      <th>Unit value</th>
                      <th>Quantity</th>
                      <th>Total value</th>
                      <th>Select</th>
                  </tr>
                    {
                        this.state.stocks.map(this.eachStock,this)
                    }
                  </tbody>
              </table>
                <p/>
                <p>Total value of {this.props.children} is {this.state.total}</p>
                <button>Add Stock</button>
                <div className={'divider'}></div>
                <button>Perf graph</button>
                <div className={'divider'}></div>
                <button onClick={this.deleteStocks}>Remove selected</button>
            </div>
        )

    };

  render(){

      if(this.state.editing)
      {
        return this.renderForm()
      }
      else
        return this.renderNormal()

  }
}

class Board extends  React.Component{

    constructor(props) {
        super(props);
        this.state = {
            portofolios: [{name: 'portofolio1', stocks: [
                    {name: 'stock11', unit_value: 1.1, quantity: 1, total_value: 1.1},
                    {name: 'stock12', unit_value: 1.2, quantity: 1, total_value: 1.2},
                    {name: 'stock13', unit_value: 1.3, quantity: 1, total_value: 1.3}
                ]
            },
                {name: 'portofolio2', stocks: [
                        {name: 'stock21', unit_value: 1.1, quantity: 1, total_value: 1.1},
                        {name: 'stock22', unit_value: 1.2, quantity: 1, total_value: 1.2},
                        {name: 'stock23', unit_value: 1.3, quantity: 1, total_value: 1.3}
                    ]
                },
                {name: 'portofolio3', stocks: [
                        {name: 'stock31', unit_value: 1.1, quantity: 1, total_value: 1.1},
                        {name: 'stock32', unit_value: 1.2, quantity: 1, total_value: 1.2},
                        {name: 'stock33', unit_value: 1.3, quantity: 1, total_value: 1.3}
                    ]
                }

            ]
        }
    }

    add = () =>
    {
        let name = this.refs.portofolio_name.value
        if(name == '')
        {
            alert("Name of Portofolio should not be empty!")
            return
        }

        var portofolio = {name: name, stocks: []};
        var arr = this.state.portofolios;
        arr.push(portofolio);
        this.setState({portofolios: arr})
    };

    removePortofolio = (i) =>
    {
        console.log("Removing portofolio "+i)
        var arr = this.state.portofolios;
        arr.splice(i,1)
        this.setState({portofolios: arr})
    }

    eachPortofolio(text,i)
    {
        //console.log(text['stocks'])
        return (<Portofolio key={i} index={i}
                         deletePortofolio={this.removePortofolio}
                         stocks={text['stocks']}
                         >{text['name']}</Portofolio>)
    }

    render ()
    {
        return (
            <div style={{padding: '2%'}}>
                <div className={'head'}>
                    <table className={'table'}>
                        <tbody>
                        <tr>
                            <td>Portofolio Name:</td><td><input type={'text'} ref='portofolio_name'/></td>
                            <td><button onClick={this.add.bind(null)}>Add new portofolio</button></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                {
                    this.state.portofolios.map(this.eachPortofolio,this)
                }
            </div>
        )
    }
}

Answer 1

我认为你的问题出在eachStock方法中。 Prop key 应该具有唯一值，并且不应该是数组索引。最好的方法是使用股票唯一值或将 id 添加到股票并使用它。