자식 구성 요소의 이벤트 처리기 설정 상태가 부모 구성 요소를 다시 렌더링하지 않습니다.

자식 구성 요소 (TableOfContents)에서 부모 구성 요소 (App)의 setState,이 경우에는 상태 비 저장 기능 구성 요소이므로 모든 것이 테이블을 다시 렌더링하고 업데이트 할 수 있습니다. 이벤트 처리기 (changeUrl)가 호출되고 상태는 내가 아는 한 변경되지만 아무것도 렌더링되지 않습니다. 테이블이 업데이트되지 않습니다!자식 구성 요소의 이벤트 처리기 설정 상태가 부모 구성 요소를 다시 렌더링하지 않습니다.

class App extends React.Component { 
    root = 'https://fcctop100.herokuapp.com/api/fccusers/top/'; 
    allTime = 'alltime'; 
    recent = 'recent'; 

    constructor(props) { 
     super(props); 
     this.state = { data: null, 
        url: this.root + this.allTime }; 
     this.changeUrl = this.changeUrl.bind(this); 
    } 

    componentDidMount() { 
     return fetch(this.state.url) 
     .then(response => response.json()) 
     .then(responseJson => { 
      this.setState({ data: responseJson }); 
     }); 
    } 

    changeUrl() { 
     this.setState({ url: this.root + this.recent }); 
    } 

    render() { 
     return (
     <div id="container"> 
      <Head /> 
      <TableOfContents handleClick={this.changeUrl} /> 
      <Tables data={this.state.data}/> 
     </div> 
    ); 
    } 
} 

const Head = (props) => { 
    return (
     <div className="head"> 
     freeCodeCamp Leaderboard 
     </div> 
    ); 
} 

const TableOfContents = (props) => { 
    return (
     <div className="tableOfContents"> 
     <tr className="headers" > 
      <td>#</td> 
      <td id='special'>Camper Name</td> 
      <td onClick={props.handleClick} style={{cursor: 'pointer'}}>Points in last 30 days</td> 
      <td>All time points</td> 
     </tr> 
     </div> 
    ); 
} 

const Tables = (props) => { 
    if (!props.data) return <p>Loading...</p>; 
    return (
     <div className="tables"> 
     { 
      props.data.map((d, i) => 
       <tr id={'table' + i}> 
        <td>{i + 1}</td> 
        <td><img src={d.img} /></td> 
        <td>{JSON.stringify(d.username).replace(/"/g, '')}</td> 
        <td>{JSON.stringify(d.recent)}</td> 
        <td>{JSON.stringify(d.alltime)}</td> 
       </tr>) 
     } 
     </div> 
    ); 
} 

ReactDOM.render(
    <App />, 
    document.getElementById('app') 
);

출처

2017-10-29 Yungil Hong