React/Redux 구성 요소를 다시 렌더링하는 중

Question

안녕하세요 저는 React/Redux for May 응용 프로그램을 사용하고 있습니다. 여러 입력 필드를 동적으로 렌더링해야합니다. 내가 지금 직면 한 문제는 ...

양식에 이미 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> 
}