React組件呈現不正確

我有一個反應項目，一個配方框，其中包括打開配方和添加/刪除配料的功能。這裏是a fiddle。您可以單擊食譜名稱打開食譜。有一個編輯按鈕顯示刪除按鈕，並提供選項來更改配料的名稱。當按下'刪除配料'按鈕時，不管選擇了哪種配料，最後一個配料總是被刪除，但是當'完成'按鈕被點擊並且可編輯的輸入框變回到文本時，顯示正確的改變，適當的成分被刪除，最後的成分仍然存在。雖然這在功能上起作用，但它顯然不是非常友好，我想知道爲什麼會發生這種情況。任何幫助都會很棒。React組件呈現不正確

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}); 
}

來源

2017-07-31 asparism

你需要將所有數據收集到的構造方法 –

裏面的狀態對象中的所有數據都存儲在狀態已經 – asparism

很抱歉，我沒有看到的jsfiddle鏈接 –

你的描述是安靜的混亂，並根據您的提琴代碼，我認爲你的問題是沒有設置你的列表一個很好的鑰匙引起的項目。
從它看起來在這一行，你沒有一個關鍵= {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]} />);

來源

2017-07-31 01:50:33

我很抱歉描述混亂，您可以點擊食譜名稱將其打開。我知道'key'道具可以幫助更有效地對DOM進行渲染，但是你的解決方案不起作用:( – asparism

好吧，它仍然是一個關鍵問題，我只是沒有看起來太接近代碼， t知道它是如何工作的，在你的情況下在一個非常外部的元素上加上一個唯一的鍵將使它工作，我編輯了我的答案 –

真棒，謝謝！ 'prop do？ – asparism

React組件呈現不正確

回答

相關問題