변경된 값이 Dom에 표시되지 않음

Question

나는 테스트 중입니다. 내 테스트 앱에서 '색상 변경'버튼을 클릭 할 때마다 색상이 바뀌고 무작위로 색상이 바뀌는 배열이 2 세트 동일합니다. 그러나 나는 돔 업데이트 내 배열 색상 심지어 값을 올바르게 변경하려면 만들 수 없습니다.

import React from 'react'; 
class Card extends React.Component{ 
    constructor(props){ 
     super(props); 
     const {r,g,b}=this.props.card 
     this.state={ 
      style:{ 
       width:'100px', 
       height:'100px', 
       display:'inline-block', 
       backgroundColor:`rgb(${r},${g},${b})` 
      } 
     } 
    } 
    onClick=()=>{ 
     const {r,g,b}=this.props.card 
     console.log('color values of the card with index',this.props.id ,' is: ', r,g,b) 
    } 
    render(){ 
     const {style}=this.state 
     return (
      <div style={style}> 
       <button onClick={this.onClick}>card test</button> 
      </div> 
     ) 
    } 
} 
export default Card; 

이

당신이 그림에서 볼 수 있듯이, 값이 모든 내가 클릭 한 시간 만 카드 '색상이 동일하게 유지 변경 내 문제

의 사진입니다. 그러나 클래스 기반 구성 요소를 비 클래스 기반 구성 요소로 변경하고 생성자 대신 render() 스타일을 설정하면 작동하지만 클래스 구성 요소를 사용하여 부모 구성 요소로 클릭 한 카드를 전달할 수 있습니다.

Answer 1

onClick은 다른 트리거링입니까? 그렇지 않으면 onClick이 단순히 로깅 일 뿐이므로 카드의 값을 변경하는 것이 표시되지 않습니다.

카드 소품이 어떻게 든 올바르게 바뀌고 있다고 가정하면 카드 소품이 업데이트 중이지만 상태가 생성자에서 설정되고 결코 업데이트되지 않는다고 생각됩니다.

상태에서 스타일 값을 설정하는 대신 render에서 스타일 계산으로 변경합니다.

render() { 
    const {r,g,b} = this.props.card 
    const style = { 
    width: '100px', 
    height: '100px', 
    display: 'inline-block', 
    backgroundColor: `rgb(${r},${g},${b})` 
    } 

    return (
    <div style={style}> 
     <button onClick={this.onClick}>card test</button> 
    </div> 
) 
} 

일반적으로 이런 상황을 피하기 위해 소품에서 쉽게 파생 된 상태를 유지할 수 없습니다.