자식 구성 요소 상태가 업데이트되지 않습니다.

Question

이것은 React의 첫 주입니다. 나는 아래쪽으로 물방울의 구현을 파악하기 어렵다.

나는 무엇이 일어나길 원하나요? 부모 컨테이너가 소켓에서 메시지를 받으면 부모의 상태 변경이 각 하위 요소로 물방울이되기를 원합니다.

현재 어떤 현상이 발생하고 있습니까? 아래 코드로 모든 구성 요소가 화면에 표시되고 메시지는 수신되지만 자식 요소는 어떤 유형의 업데이트도 등록하지 않습니다.

** 업데이트 : ProgressBlock을 배열로 루프에 넣은 다음 {this.state.blocks}으로 렌더링 트리에 배열을 배치하면 모든 것이 잘 작동합니다. 이것은 역동적이 아니기 때문에 불행한 일이지만 최소한 진전이 있습니다.

부모 컨테이너

class InstanceContainer extends React.Component { 

    constructor(props) { 
    super(props) 

    this.state = { 
     id: ids.pop(), 
     callInProgress: false, 
     callsCompleted: 0, 
     eventProgress: 0, 
     blocks: [] 
    } 
    } 

    componentWillMount() { 

    const lightColors = ['white', 'white', 'cyan', 'green', 'green', 'yellow', 'orange', 'magenta', 'red'] 
    for (let i = 0; i < 10; i++) { 
     this.state.blocks.push(<ProgressBlock bgColor={lightColors[i]} eventPlace={i} eventProgress={this.state.eventProgress} />) 
    } 
    } 

    render() { 

    socket.on(this.state.id, (msg) => { 
     console.log(msg) 
     console.log('RECEIVED MESSAGE') 
     console.log(this.state.id) 

     if (msg) { 
     this.setState((prevState) => ({ 
      eventProgress: 0, 
      callsCompleted: prevState.callsCompleted + 1 
     })) 
     } else { 
     this.setState((prevState) => ({ 
      eventProgress: prevState.eventProgress + 1 
     })) 
     } 

     console.log(this.state.eventProgress) 

    }) 

    return (
     <div className="instance-container" id={this.state.id}> 
     {this.state.blocks} 
     <CompletionCounter callsCompleted={this.state.callsCompleted} /> 
     <DisplayLog /> 
     <VenueName /> 
     </div> 
    ) 
    } 
} 

자식 요소

class ProgressBlock extends React.Component { 

    constructor(props) { 
    super(props) 

    this.state = { 
     light: false, 
     eventProgress: this.props.eventProgress, 
     bgColor: this.props.bgColor 
    } 
    } 

    componentWillUpdate() { 
    if (this.state.eventProgress >= this.props.eventPlace) { 
     this.setState({ 
     light: true 
     }) 
    } 
    } 


    render() { 

    console.log(this.state.eventProgress) // Does not log when parent changed 
    console.log(this.props.eventPlace) // Does not log when parent changed 

    const styleObj = { 
     backgroundColor: '#232323' 
    } 

    if (this.light) { 
     const styleObj = { 
     backgroundColor: this.props.bgColor 
     } 
    } 

    return <div className="progress-block" style={styleObj} /> 
    } 
} 

Answer 1

자식 요소의 constructor 한 번 호출되고, 따라서 당신의 상태는 하위 요소에 업데이트 gettinng되지 않습니다. 또한 소품에 의존 할 때 생성자에서 상태를 설정하는 반 패턴입니다. 소도구가 업데이트 될 때 호출되는 componentWillReceiveProps 수명주기 함수에서 수행해야합니다. 아래 코드를 참조하십시오

class ProgressBlock extends React.Component { 

    constructor(props) { 
    super(props) 

    this.state = { 
     light: false, 
     eventProgress: '', 
     bgColor: '' 
    } 
    } 
    componentWillMount() { 

     this.setState({eventProgress: this.props.eventProgress, bgColor: this.props.bgColor}); 
} 
    componentWillReceiveProps(nextProps) { 
    this.setState({eventProgress: nextProps.eventProgress, bgColor: nextProps.bgColor}); 
    } 
    componentWillUpdate() { 
    if (this.state.eventProgress >= this.props.eventPlace) { 
     this.setState({ 
     light: true 
     }) 
    } 
    } 


    render() { 

    console.log(this.state.eventProgress) 
    console.log(this.props.eventPlace) 

    const styleObj = { 
     backgroundColor: '#232323' 
    } 

    if (this.light) { 
     const styleObj = { 
     backgroundColor: this.props.bgColor 
     } 
    } 

    return <div className="progress-block" style={styleObj} /> 
    } 
}