我是新来的反应者。我正在尝试构建第一个简单的应用程序，其中应包含一些portofolios，每个portofolio应包含一些库存。我想添加能够从Portofolio删除所有选定股票的功能。我尝试实现该功能，但是该程序的行为很奇怪。渲染库存时，它不会反映已执行的删除操作，而不会显示最后的库存（即，如果删除了其中的两个）。
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>
)
}
}
答案 0 :(得分：1)
我认为您的问题出在eachStock方法中。属性键应具有唯一值，并且不应为数组索引。最好的方法是使用股票唯一值或向股票添加ID并使用它。