Question

每次更换道具后，我应该如何重置孩子的状态？

父组件：

render() {
    const { show, month } = this.props; // January, February, ...

    return (
      { show ? <Child selectedMonth={month} /> : null }
    );
  }

子组件：

componentDidMount() {
    this.resetChildState();
    // this will never run if the Parent's month prop is changed
    // only if show becomes false from true
  }

我希望resetChildState每月进行一次更改。

Answer 1

只需尝试使用componentDidUpdate，在此方法的主体中，您可以比较是否更改了来自父对象的道具。因此，如果他们确实只是调用您的reset方法或您想要的任何东西。有关更多信息，请访问https://reactjs.org/docs/react-component.html#componentdidupdate

componentDidUpdate(prevProps, prevState) {
   if(this.props.selectedMonth!== prevProps.selectedMonth) {
        this.resetChildState();
   }
}

Answer 2

您可以使用getDerivedStateFromProps()

static getDerivedStateFromProps(nextProps, prevState) {
 if(monthChanged){
  return initialState; //reset to initialState that you have defined.
  }
 return null;
}

Answer 3

如果您只想在更改道具后重设状态，则可以使用Car反应生命周期，如下所示：

v1/Endpoint/Service.wsdl (ignoring pathinfo: no), entry status: success
2019-12-16 23:56:13.600 +0000 WARNING [0x7fbbad2e0700:25372] am_get_session_policy_cache_entry(): failed to locate data for a key (AQIC5wM2LY4SfczGLQ1DDuEKbdwlTLEr4jy8i3dP7PJHaAo.*AAJTSQACMDEAAlNLABQtNDUxOTQxMTA0MTQzNjk3Mzc5Nw..*, WebSessionID=10.16.144.64.1576481325860310)
2019-12-16 23:56:13.600 +0000 DEBUG [0x7fbbad2e0700:25372][source/process.c:938] validate_policy(): get session cache status: not found
2019-12-16 23:56:13.600 +0000 DEBUG [0x7fbbad2e0700:25372][source/utility.c:1651] get_valid_openam_url(): active OpenAM service url: https://www-devam.domain.co.uk:18081/opensso (0)
2019-12-16 23:56:13.600 +0000 DEBUG [0x7fbbad2e0700:25372][source/utility.c:1756] am_timer(): getaddrinfo took 0 seconds
2019-12-16 23:56:13.601 +0000 DEBUG [0x7fbbad2e0700:25372][source/net_client.c:496] sync_connect(): connected to www-devam.domain.co.uk:18081 (IPv4)
2019-12-16 23:56:13.601 +0000 DEBUG [0x7fbbad2e0700:25372][source/net_client_ssl.c:590] net_ssl_msg_callback(): SSLv2/v3 write client hello B (23WCHB)
2019-12-16 23:56:13.601 +0000 DEBUG [0x7fbbad2e0700:25372][source/net_ops.c:559] send_session_request(): sending 752 bytes
2019-12-16 23:56:13.613 +0000 DEBUG [0x7fbbad2e0700:25372][source/net_client_ssl.c:590] net_ssl_msg_callback(): SSLv3 read server hello B (3RSH_B)
2019-12-16 23:56:13.613 +0000 DEBUG [0x7fbbad2e0700:25372][source/net_client_ssl.c:590] net_ssl_msg_callback(): SSLv3 read server certificate B (3RSC_B)
2019-12-16 23:56:13.613 +0000 DEBUG [0x7fbbad2e0700:25372][source/net_client_ssl.c:590] net_ssl_msg_callback(): SSLv3 read server key exchange B (3RSKEB)
2019-12-16 23:56:13.613 +0000 DEBUG [0x7fbbad2e0700:25372][source/net_client_ssl.c:331] show_server_cert(): server certificate subject: /C=DE/O=Org/CN=www-devam.domain.co.uk
2019-12-16 23:56:13.613 +0000 DEBUG [0x7fbbad2e0700:25372][source/net_client_ssl.c:338] show_server_cert(): server certificate issuer: /C=DE/O=Org/CN=OrgInfrastructure CA V
2019-12-16 23:56:13.613 +0000 DEBUG [0x7fbbad2e0700:25372][source/net_client_ssl.c:590] net_ssl_msg_callback(): SSLv3 read server certificate request B (3RCR_B)
2019-12-16 23:56:13.624 +0000 DEBUG [0x7fbbad2e0700:25372][source/net_client_ssl.c:590] net_ssl_msg_callback(): SSLv3 write client key exchange B (3WCKEB)
2019-12-16 23:56:13.624 +0000 DEBUG [0x7fbbad2e0700:25372][source/net_client_ssl.c:590] net_ssl_msg_callback(): SSLv3 write change cipher spec B (3WCCSB)
2019-12-16 23:56:13.624 +0000 DEBUG [0x7fbbad2e0700:25372][source/net_client_ssl.c:590] net_ssl_msg_callback(): SSLv3 write finished B (3WFINB)
2019-12-16 23:56:13.628 +0000 DEBUG [0x7fbbad2e0700:25372][source/net_client_ssl.c:590] net_ssl_msg_callback(): SSLv3 read finished A (3RFINA)
2019-12-16 23:56:13.628 +0000 DEBUG [0x7fbbad2e0700:25372][source/net_client_ssl.c:590] net_ssl_msg_callback(): SSLv3 read finished B (3RFINB)
2019-12-16 23:56:13.630 +0000 DEBUG [0x7fbbad2e0700:25372][source/net_ops.c:577] send_session_request(): response status code: 200
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<ResponseSet vers="1.0" svcid="session" reqid="0">
<Response><![CDATA[<SessionResponse vers="1.0" reqid="1">
<GetSession>
<Exception>AQIC5wM2LY4SfczGLQ1DDuEKbdwlTLEr4jy8i3dP7PJHaAo.*AAJTSQACMDEAAlNLABQtNDUxOTQxMTA0MTQzNjk3Mzc5Nw..*, WebSessionID=10.16.144.64.1576481325860310 Invalid session ID.AQIC5wM2LY4SfczGLQ1DDuEKbdwlTLEr4jy8i3dP7PJHaAo.*AAJTSQACMDEAAlNLABQtNDUxOTQxMTA0MTQzNjk3Mzc5Nw..*, WebSessionID=10.16.144.64.1576481325860310</Exception>
</GetSession>
</SessionResponse>]]></Response>
</ResponseSet>
2019-12-16 23:56:13.630 +0000 DEBUG [0x7fbbad2e0700:25372][source/net_ops.c:598] send_session_request(): status: invalid session
2019-12-16 23:56:13.630 +0000 DEBUG [0x7fbbad2e0700:25372][source/net_ops.c:1163] am_agent_policy_request(): closing connection after failure
2019-12-16 23:56:13.630 +0000 DEBUG [0x7fbbad2e0700:25372][source/net_client_ssl.c:590] net_ssl_msg_callback(): SSL negotiation finished successfully (SSLOK )
2019-12-16 23:56:13.630 +0000 WARNING [0x7fbbad2e0700:25372] validate_policy(): retry 0 (remote session/policy call failure: invalid session)
2019-12-16 23:56:13.630 +0000 WARNING [0x7fbbad2e0700:25372] am_remove_cache_entry(): cache data is not available (AQIC5wM2LY4SfczGLQ1DDuEKbdwlTLEr4jy8i3dP7PJHaAo.*AAJTSQACMDEAAlNLABQtNDUxOTQxMTA0MTQzNjk3Mzc5Nw..*, WebSessionID=10.16.144.64.1576481325860310)
2019-12-16 23:56:13.630 +0000 DEBUG [0x7fbbad2e0700:25372][source/process.c:1707] handle_exit(): (entry status: invalid session)

Answer 4

使用ComponentDidUpdate

 componentDidUpdate() {
        if (this.props.id !== this.state.section_id) {
            this.setState({
                section_id:this.props.id,
                filteredProducts:[],
                productsByPage:[],
                pageNumber:0,
                hasMore:true,
                showloading:true

            },()=>this.fetchData());
        }
    }

如何在更改道具时重置组件中的状态

4 个答案: