홈>2020-02-01 01:21

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

값을 렌더링하기 위해 배열을 반복합니다. 항목을 클릭하면 값과 setState를 가져와야합니다. 현재 어떤 요소를 클릭하든 관계없이 배열의 마지막 요소 값으로 상태를 설정합니다.

onClick 호출에서 화살표 기능을 사용하고있는 것이 문제 일 수 있습니다. jslint는 또한 이와 같은 루프에서 함수를 호출하는 것에 대한 나쁜 습관을 강조합니다.

값을 클릭하면 맨 아래에 상태가 표시됩니다. 도움을 주시면 대단히 감사하겠습니다.

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++) {
    	var 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>

javascript reactjs

답변 # 1

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

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

데모

답변 # 2

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

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

답변 # 3

루프의 화살표 함수는 문제가 아니지만 안전하지 않은 변수 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>

Python2.net

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

관련 자료