React：类组件中是否可以按需调用函数组件实现更新？

你不需要在handleClick里手动调用Paging函数组件，React的组件渲染是由状态变更自动驱动的，你之前想手动调用Paging的思路是错误的：手动调用Paging()只会得到JSX对象，并不会触发已渲染到DOM中的Paging组件更新。你点击分页按钮后只要拿到新的分页数据更新类组件的state，传给Paging的props变化后组件会自动重渲染，不需要手动触发。

• 修正fetchApi的逻辑，请求接口拿到新的分页数据后，调用this.setState更新state里的apiPaging字段
• 修正handleClick的this指向问题，避免调用this相关方法时报错
• 优化Paging组件的props传参，不要传递整个类实例，仅传必要参数即可

函数组件Paging #

function Paging(props) {
  const { apiPaging, handleClick } = props;
  const renderPageNumbers = apiPaging.map((links, index) => {
    return (
      <button 
        key={index} 
        id={index}
        url={links.url}
        onClick={handleClick} 
        className={links.active ? "mark-page" : "" } 
      >
        {links.label}
      </button>     
    )
  })
  return (
    <div id = "page-nums">
      {renderPageNumbers}
    </div>
  )
}

类组件相关代码 #

// 用箭头函数定义handleClick，自动绑定this，不需要额外bind
handleClick = (event) => {
  const targetUrl = event.target.getAttribute('url');
  // 异步请求接口，拿到返回后更新state即可
  this.fetchApi(targetUrl).then(newApiPaging => {
    this.setState({
      apiPaging: newApiPaging
    })
    // 不需要做任何手动调用Paging的操作，setState后props更新，Paging自动重渲染
  })
}

fetchApi = async (url) => {
  // 这里替换为你自己的接口请求逻辑，返回新的分页数组即可
  const res = await fetch(url);
  const data = await res.json();
  return data.apiPaging; // 假设接口返回的分页数据字段为apiPaging
}

render() {
  return(
    <div>
      <Paging 
        handleClick={this.handleClick}
        apiPaging={this.state.apiPaging}
      />
    </div>
  )
}

内容的提问来源于stack exchange，提问作者user14964079