Javascript 从react中的父组件中删除多个子组件

我是新来的。我正在尝试构建我的第一个简单应用程序，它应该包含一些portofolio，每个portofolio应该包含一些股票。我想添加能够从portofolio中删除所有选定股票的功能。我曾尝试实现该功能，但程序的行为很奇怪。呈现库存时，它不会反映执行的删除，但不会显示最后的库存（即，如果删除了其中两个库存）

class.Component{
建造师（道具）
{
超级（道具）；
此.state={
名称：this.props.name，
单位价值：this.props.unit价值，
数量：this.props.quantity，
总价值：this.props.total价值，
所选：false
}
}
isSelected=（）=>
{
var isSelected=this.state.selected；
isSelected=！isSelected；
this.setState（{selected:isSelected}）；
this.props.selected（this.props.index）；
log（“您选择了我！”+this.props.index）
};
删除=（）=>
{
log（“我正在移除带有指数的股票：+this.props.index”）；
this.props.deleteStock（this.props.index）
};
render（）
{
返回(
{this.state.name}
{this.state.unit_value}
{this.state.quantity}
{this.state.total_value}
)
}
}
类Portofolio扩展了React.Component{
建造师（道具）
{
超级（道具）；
让sum=（）=>{
设stocksSum=0.0；
让股票=this.props.stocks；
控制台.日志（库存）；
对于（让我们在股票中）
{
stocksSum=stocksSum+股票[s]['总价值']
}
返回分析浮动（stocksSum）.toFixed（2）；
};
此.state={
编辑：错，
选定：[]，
股票：这个。道具。股票，
总计：总额（美元）
}
}
deleteStock=（i）=>{
控制台日志（“移除库存：+i”）；
var arr=this.state.stocks；
阵列拼接（i，1）；
this.setState（{stocks:arr}）
};
删除股票=（）=>
{
让selectedItems=this.state.selected；
console.log（“要删除的项目”）；
console.log（selectedItems）；
让股票=this.state.stocks；
for（让a进入selectedItems）
{
//stocks.splice（selectedItems[a]-a，1）
this.deleteStock（selectedItems[a]-a）；
log（“已删除：+selectedItems[a]）
}
//this.setState（{stocks:stocks}）
console.log（“删除后的库存：）
控制台日志（库存）
让sum=（）=>{
设stocksSum=0.0
让股票=this.state.stocks
对于（让我们在股票中）
{
stocksSum=stocksSum+股票[s]['总价值']
}
返回分析浮动（stocksSum）.toFixed（2）；
}
this.setState（{total:sum（）}）
}
删除=（）=>
{
this.props.deletePortofolio（this.props.index）
};
选定=（i）=>{
让arr=this.state.selected
if（arr.indexOf（i）=-1）
{
arr.push（一）
}
其他的
{
arr=arr.filter（项=>项！==i）
}
this.setState（{selected:arr}）
控制台日志（arr）
}
每个目录（文本，i）
{
返回(
)
}
renderNormal=（）=>
{
常量样式={
边框#u底部：“1px实心#ddd”
};
返回(


{this.props.children}
以欧元显示
展示$



名称
单位价值
量
总价值
选择
{
this.state.stocks.map（this.eachStock，this）
}

{this.props.children}的总值为{this.state.Total}
增加库存
性能图
删除选定的
)
};
render（）{
if（this.state.editing）
{
返回此
}
其他的
返回此值。renderNormal（）
}
}
类板扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
portofolios:[{名称：'portofolio1'，股票：[
{名称：'stock11'，单位值：1.1，数量：1，总值：1.1}，
{名称：'stock12'，单位值：1.2，数量：1，总值：1.2}，
{名称：'stock13'，单位值：1.3，数量：1，总值：1.3}
]
},
{名称：'portofolio2'，股票：[
{名称：'stock21'，单位值：1.1，数量：1，总值：1.1}，
{名称：'stock22'，单位值：1.2，数量：1，总值：1.2}，
{名称：'stock23'，单位值：1.3，数量：1，总值：1.3}
]
},
{名称：'portofolio3'，股票：[
{名称：'stock31'，单位值：1.1，数量：1，总值：1.1}，
{name:'stock32'，单位值：1.2，数量：1，总值：1.2}，
{名称：'stock33'，单位值：1.3，数量：1，总值：1.3}
]
}
]
}
}
添加=（）=>
{
让na
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>
        )
    }
}