React组件呈现不正确

Question

我有一个反应项目，一个配方框，其中包括打开配方和添加/删除配料的功能。这里是a fiddle。您可以单击食谱名称打开食谱。有一个编辑按钮显示删除按钮，并提供选项来更改配料的名称。当按下'删除配料'按钮时，不管选择了哪种配料，最后一个配料总是被删除，但是当'完成'按钮被点击并且可编辑的输入框变回到文本时，显示正确的改变，适当的成分被删除，最后的成分仍然存在。虽然这在功能上起作用，但它显然不是非常友好，我想知道为什么会发生这种情况。任何帮助都会很棒。

jsFiddle

class Input extends React.Component { 
    render() { 
    const array = this.props.update; 
    let booleanButton = null; 
    if (this.props.ingr) { 
//////////////////////////// 
// here is the button's JSX 
    booleanButton = <button onClick= 
    {this.props.handleDeleteIngredient.bind(this, array)}>delete 
    ingredient</button>; 
/////////////////////////// 
    } 
return (<div><form><input type="text" defaultValue={this.props.text} 
    onChange={this.props.onChange.bind(this, array)} /></form>{booleanButton} 
    </div>) 
    } 
} 

而且处理程序：

handleDeleteIngredient(data, e) { 
    var key = data[2]; 
    var ingrs = this.state.ingrs; 
    ingrs.splice(key, 1); 
    this.setState({ingrs:ingrs}); 
} 

Answer 1

你的描述是安静的混乱，并根据您的提琴代码，我认为你的问题是没有设置你的列表一个很好的钥匙引起的项目。
从它看起来在这一行，你没有一个关键= {ingrs [i]}道具，尝试将它设置为ID看到它会起作用，但将ingrediant名称作为关键字可能不是一个好主意，请尝试给一个实际的ID。

ingrList.push(<Input key={ingrs[i]} handleDeleteIngredient={this.handleDeleteIngredient.bind(this)} id={id} update={[this.props.objectIndex, "ingrs", i]} onChange={this.onInputChangeIng.bind(this)} text={ingrs[i]} />);