来自子组件的事件处理程序设置状态不会重新呈现父组件

Question

我正在尝试从子组件 (TableOfContents) 设置父组件 (App) 的状态，在本例中是无状态功能组件，以便一切都可以重新呈现和更新我的 tables .据我所知，事件处理程序（changeUrl）被调用并且状态发生了变化，但没有重新渲染，table 没有更新！

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')
);

Answer 1

还可以使用 componentDidUpdate 和 componentDidMount 来执行获取逻辑，如果你想用新数据填充 table

来自子组件的事件处理程序设置状态不会重新呈现父组件

Event-handler setting state from a child component doesn't re-render parent component

javascript

setstate

reactjs

eventhandler