React / Redux組件重新渲染

Question

嗨，我一直在為May App使用React / Redux。 我必須動態呈現多個輸入字段。 我現在面臨的問題是...

因此，假設表單已經有2個輸入字段，而我總共希望有5個輸入字段，那么我將借助5個重復的循環來簡單地渲染這些輸入字段。 問題是反應會渲染3個新字段，並保留2個舊字段。 但是我需要5個新領域。 有沒有一種方法可以強制反應先刪除舊字段，然后渲染5個新字段。

Answer 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>
}