저는 React를 처음 사용하므로 할 수없는 일을하려고한다면 미리 사과드립니다. 상태의 "scores"배열에 선택 항목에 대한 ID와 점수를 포함하는 개체를 저장하려고합니다. handleScore라는 함수에서 객체를 빌드하고 있는데 처음 선택을 클릭하고 점수 배열을 콘솔에 즉시 기록 할 때 상태가 제대로 표시되는 것처럼 보이지만 렌더링에서 점수 배열을 콘솔에 기록하면 방법을 선택하면 1이 표시됩니다. 선택을하면 1이 표시되고 버튼을 다시 클릭합니다. 아무도 무슨 일이 일어나고 있는지 아이디어가 있습니까? 다음은 코드입니다.
handleScore = (id, score, idx) => {
const { statements, scores } = this.state;
let scoreObj = {};
Object.assign(scoreObj, {'id': id, 'score': score});
if (statements[0][idx].isSelected) {
this.setState({
scores: scores[0].push(scoreObj)
});
console.log("scores array: ", scores[0]); //outputs an array containing [{id: "O1", score: "4"}]
} else {
console.log("scores array: ", scores[0]); // outputs 1
}
}
render () 메서드에서 :
render() {
console.log("this.state.scores from render method: ", this.state.scores); // outputs 1 instead of [{id: "O1", score: "4"}]
return (
<div>
<div className="statements-wrapper">
{
this.state.statements[0].map((item, index) => (
<div
key={item.id} onClick={(e) => {
e.preventDefault();
this.handleScore(item.id, match.params.score, index)
}}>
<a href="#">{item.statement}</a>
</div>
)
)
}
</div>
</div>
)
예상 출력 :
scores: [
[{id: "O1", score: 4}, {id: "G1", score: 3}, {id: "B1", score: 2}, {id: "R1", score: 1}],
[{id: "O2", score: 4}, {id: "G2", score: 3}, {id: "B2", score: 2}, {id: "R2", score: 1}],
[{id: "O3", score: 4}, {id: "G3", score: 3}, {id: "B3", score: 2}, {id: "R3", score: 1}],
[{id: "O4", score: 4}, {id: "G4", score: 3}, {id: "B4", score: 2}, {id: "R4", score: 1}],
[{id: "O5", score: 4}, {id: "G5", score: 3}, {id: "B5", score: 2}, {id: "R5", score: 1}]
]
문제는 .NET this.state.scores을 사용할 때 전체를 단일 어레이로 교체하는 데서 발생한다고 생각합니다 setState. 나머지 요소 배열을 유지하려면 다음과 같이해야합니다.
handleScore = (id, score, idx) => {
const { statements, scores } = this.state;
if (statements[0][idx].isSelected) {
// this assumes you want to append the first array (hence 'index === 0') in this.state.scores
this.setState({
scores: scores.map((item, index) => index === 0 ? [...item, {'id': id, 'score': score}] : item)
});
}
}
또한 위의 방법 은 배열 push의 끝에 새 개체를 배치 할 뿐만 아니라 setState비동기식이므로 scores나중에 즉시 콘솔 로깅을 신뢰할 수 없다는 점에 유의하는 것이 중요합니다 .
내부 배열 중 하나에서 특정 객체를 제거하려면 filter 를 사용할 수 있습니다 .
// replacing an inner object by id value
scores.map((item, index) => index === 0 ?
item.filter((i) => i.id !== "01")
: item
)
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다