web-dev-qa-db-fra.com

React - alternative à ComponentWillReceiveProps

J'utilise React avec NextJS.

J'ai un composant qui est essentiellement un tableau qui donne un résumé. En fonction de la sélection de l'interface utilisateur, ce composant devrait afficher un résumé approprié.

Le code ci-dessous fonctionne parfaitement bien.

class Summary extends Component{

    state = {
        total: 0,
        pass: 0,
        fail: 0,
        passp: 0,
        failp: 0
    }

    componentWillReceiveProps(props){
        let total = props.results.length;
        let pass  = props.results.filter(r => r.status == 'pass').length;
        let fail  = total - pass;
        let passp = (pass/(total || 1) *100).toFixed(2);
        let failp = (fail/(total || 1) *100).toFixed(2);
        this.setState({total, pass, fail, passp, failp});
    }

    render() {
        return(
          <Table color="teal" >
                <Table.Header>
                  <Table.Row textAlign="center">
                    <Table.HeaderCell>TOTAL</Table.HeaderCell>
                    <Table.HeaderCell>PASS</Table.HeaderCell>
                    <Table.HeaderCell>FAIL</Table.HeaderCell>
                    <Table.HeaderCell>PASS %</Table.HeaderCell>
                    <Table.HeaderCell>FAIL %</Table.HeaderCell>                                 
                  </Table.Row>
                </Table.Header>
                <Table.Body>
                  <Table.Row textAlign="center">
                    <Table.Cell>{this.state.total}</Table.Cell>
                    <Table.Cell >{this.state.pass}</Table.Cell>
                    <Table.Cell >{this.state.fail}</Table.Cell>                                     
                    <Table.Cell >{this.state.passp}</Table.Cell>
                    <Table.Cell >{this.state.failp}</Table.Cell>                                      
                  </Table.Row>
                </Table.Body>
           </Table>             
        );
    }
}

On dirait que componentWillReceiveProps sera obsolète. J'ai essayé d'autres options comme shouldComponentUpdate etc., qui mènent toutes à une boucle infinie. Quelle est la meilleure approche pour mettre à jour l'état à partir des accessoires pour rendre ce composant à nouveau?

reactjsnextjs
21
KitKarson

De réagir blog , 16.3 a introduit les avis d'amortissement pour componentWillRecieveProps.

Pour contourner le problème, vous utiliseriez la méthode

static getDerivedStateFromProps(nextProps, prevState)

par conséquent

componentWillReceiveProps(props){
    let total = props.results.length;
    let pass  = props.results.filter(r => r.status == 'pass').length;
    let fail  = total - pass;
    let passp = (pass/(total || 1) *100).toFixed(2);
    let failp = (fail/(total || 1) *100).toFixed(2);
    this.setState({total, pass, fail, passp, failp});
}

devient

static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.total !== prevState.total) {
    return ({ total: nextProps.total }) // <- this is setState equivalent
  }
  etc...
}
28
Denis Tsoi