React / Redux组件重新渲染

Question

Hi I have been using React / Redux for may App. I have to render multiple input fields dynamically. The problem which I am facing right now is...

So suppose, the form already have 2 input fields, and I want 5 input fields total, I will simply render these with the help of a loop with 5 repetitions. the problem is react renders 3 new fields and keeps 2 old at top. But I need fresh 5 fields. Is there a way to force react to remove old fields first and then render 5 new fields.

Answer 1

The problem is in the key attribute. If you give the components new keys each render, then the fields will be recreated

A small example is below. I used Math.and() to generate unique keys. Of course, better to use shortid or similar

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