홈>
값을 렌더링하기 위해 배열을 반복합니다. 항목을 클릭하면 값과 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>
- 답변 # 1
- 답변 # 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>
관련 자료
- javascript : 요소를 클릭할 때 한 구성 요소에서 다른 구성 요소로 ID를 전달하는 방법
- javascript - 매핑 된 배열에서 onClick 필터링
- bash 배열의 요소를 곱하고 배열 요소를 새 값으로 설정
- PHP 배열에서 동일한 날짜를 갖는 요소를 추가하여 새 배열을 형성하는 방법
- MongoDB 요소 필드를 값 배열로만 변환
- c++ - 배열에서 가장 작은 요소 찾기
- python - 요소의 예상 인덱스가 원래 인덱스가되도록 배열 셔플
- java - 배열의 마지막 요소 만 표시하는 이유는 무엇입니까?
- javascript - 배열로 푸시 될 때 값이 중복됩니다
- vue.js - v-for - 배열 요소 및 속성 분해
- javascript - 내 함수에서 무엇을 놓치고 있습니까 (오른쪽 요소보다 큰 요소 배열 반환)?
- python - numpy를 사용하여 배열의 요소에서 위치를 찾을 가능성이 있습니까?
- java - 디렉토리 내의 파일로 채워지지 않는 파일 배열, 이유를 알 수 없음
- 자바 스크립트 - 배열의 마지막 요소를 반환하는 함수
- c++ - 요소별로 배열 요소를 삭제할 수 있습니까?
- jsonb 열의 json 속성에있는 배열에서 배열 요소 가져 오기
- 자바 스크립트 배열의 한 요소를 업데이트하면 모든 요소가 업데이트됩니다
- javascript - 객체가 중첩되지 않도록 배열 수정
- 배열 요소의 모든 숫자가 0 또는 1인지 확인 [c ++]
- r - 3D 배열에 요소를 추가하는 방법은 무엇입니까?
관련 질문
- javascript : React JS: 객체 요소를 문자열로 연결할 때 [객체 객체] 가져오기
- javascript : EXPO EAS BUILD "HTTP 오류: 응답 code 400(잘못된 요청)"
- javascript : 데이터에 키가 있는지 확인하는 방법 [중복]
- javascript : React 최대 업데이트 깊이 초과 경고
- javascript : 반응 네이티브를 사용하여 웹 사이트로 리디렉션하는 버튼, 누를 수 있거나 터치 가능한 불투명도를 만드는 방법
- javascript : 잡히지 않은 오류: 모듈 빌드 실패(./node_modules/babel-loader/lib/index.js에서)
- javascript : 다시 차트가 있는 X축에 버튼 표시
- javascript : 프로그래밍 방식으로 Figma 플러그인에 포커스 설정
- javascript : 반응 제품에 대한 설명 표시
- javascript : React JS에서 map 메소드를 사용하여 배열 데이터를 인쇄하는 방법은 무엇입니까?
for
대신 루프, 당신은map
를 사용할 수 있습니다 배열을 반복합니다.데모