React/Reduxコンポーネントの再レンダリング

Question

こんにちは私はReact/Reduxをmayアプリに使用しています。私は複数の入力フィールドを動的にレンダリングする必要があります。私が今直面している問題は...

フォームにすでに2つの入力フィールドがあり、合計5つの入力フィールドが必要な場合は、単純に5回繰り返すループの助けを借りてこれらをレンダリングします。問題は、3つの新しいフィールドをレンダリングし、2つの古いフィールドを一番上に維持することです。しかし、新鮮な5つのフィールドが必要です。最初に古いフィールドを削除して5つの新しいフィールドを表示するように強制する方法はありますか？

Answer 1

問題はキー属性にあります。コンポーネントに新しいキーを1つずつレンダリングすると、フィールドが再作成されます。

小さな例は以下のとおりです。私は一意のキーを生成するためにMath.and（）を使いました。もちろん、より良いshortidまたは類似

https://www.npmjs.com/browse/keyword/shortid

class InputRenderer extends Component { 

    constructor() { 
    super() 
    this.state = { 
     inputsCount: 3 
    } 
    } 

    handleInputsCountChange = (newCount) => { 
    this.setState({ 
     inputsCount: newCount 
    }) 
    } 

    renderInputs =() => { 
    const inputs = [] 
    for (let i = 0; i < this.state.inputsCount; i++) { 
     inputs.push(<input key={i + Math.random()} />) 
    } 
    return inputs 
    } 

    render =() => 
    <div> 
     <button onClick={() => this.handleInputsCountChange(3)}>3</button> 
     <button onClick={() => this.handleInputsCountChange(5)}>5</button> 
     {this.renderInputs()} 
    </div> 
}