홈>
값을 렌더링하기 위해 배열을 반복합니다. 항목을 클릭하면 값과 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 - 반응 함수 구성 요소의 끝에서 값을 반환 할 것으로 예상되는 linter를 수정하는 방법은 무엇입니까?
- javascript - 컴포넌트가 렌더링되기 전에 한 번만 Hook 호출 (Meteor/React/Apollo/Graphql)
- javascript - react native 오류 실패한 소품 유형 - `오버레이`에 제공된`배열`유형의 잘못된 소품`하위`,
- javascript - react-redux - 시도 된 가져 오기 오류 : '/components/score'에 기본 내보내기가 포함되어 있지 않습니다 ( 'score'로 가져옴)
- javascript - 콜백 내에서 React Hook "useState"를 호출 할 수 없습니다
- javascript - SVG 요소의 너비와 높이를 제어하는 방법
- javascript - 반응에서 목록 그룹 항목의 스타일을 전환하기 위해 div 대상에 액세스하는 방법은 무엇입니까?
- reactjs - 상태에서 매핑 된 목록 항목 순환 (javascript)
- javascript - enoent - react-native 프로젝트에서 react-navigation을 설치할 때 그러한 파일이나 디렉토리가 없습니다
- javascript - video-react - handlestatechange는 한 번만 호출되어야 할 때 여러 번 호출됩니다
for
대신 루프, 당신은map
를 사용할 수 있습니다 배열을 반복합니다.데모