javascript - 대상 요소에 관계없이 배열 onClick의 마지막 요소로 설정되는 setState

전통적인 for 대신  루프, 당신은 map 를 사용할 수 있습니다  배열을 반복합니다.

renderValues = Values.valuesList.map((valueItem,i) => {
      return <div 
        onClick={() => this.getValue(valueItem.value)}
        key={i}
      >
        <p>{valueItem.value}</p>
      </div>
    })

데모

문제는 루프에서 생성 된 함수에 있다고 지적하는 것이 옳습니다. 루프에서 함수를 정의 할 때 클로저가 생성되고 클로저에 전달 된 마지막 값은 모든 onClick 함수에 대해 표시되는 세 번째 값입니다.

자세한 설명은 여기에서 찾을 수 있습니다

루프의 화살표 함수는 문제가 아니지만 안전하지 않은 변수 valueItem 를 포함합니다  그것입니다.

let 사용   var 대신  변수 valueItem  코드를 작동시킵니다.

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	currentValue: null,
    }
  }
  
  getValue = (valueToGet) => {
  	this.setState({
    	currentValue: valueToGet,
    })
  };
  
  render() {
	const Values = {
    	valuesList: [{
        value: 'value one'
        },{
        value: 'value two',
        },{
        value: 'value three',
        }
      ]
    };
    
    var renderValues = [];
    var valuesList = Values.valuesList;
    
    for(var i=0; i < valuesList.length; i++) {
    	let valueItem = valuesList[i];
      
      renderValues.push(
      <div 
        onClick={() => this.getValue(valueItem.value)}
        key={i}
      >
        <p>{valueItem.value}</p>
      </div>
      )
    }
    return (
      <div>
        {renderValues}
        {JSON.stringify(this.state.currentValue)}
      </div>
    )
  }
}
ReactDOM.render(<App />, document.querySelector("#app"))

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}
p {
  padding-bottom: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>