React - componentWillReceiveProps 替代方案 [英] React - componentWillReceiveProps alternative

问题描述

我将 React 与 NextJS 一起使用.

I use React with NextJS.

我有一个组件，它基本上是一个提供一些摘要的表格.根据一些 UI 选择，该组件应显示适当的摘要.

I have a component which is basically a table which gives some summary. Based on some UI selection, this component is expected to show appropriate summary.

下面的代码运行良好.

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

看起来 componentWillReceiveProps 将被弃用.我尝试了其他选项，例如 shouldComponentUpdate 等.它们都导致无限循环.从道具更新状态以重新渲染此组件的最佳方法是什么?

Looks like componentWillReceiveProps will be deprecated. I tried other options like shouldComponentUpdate etc..they all lead to infinite loop. What is best approach to update the state from the props to re-render this component?

推荐答案

来自 react blog，16.3 引入了 componentWillRecieveProps 的弃用通知.

From react blog, 16.3 introduced deprecation notices for componentWillRecieveProps.

作为一种解决方法，您可以使用该方法

As a workaround, you would use the method

static getDerivedStateFromProps(nextProps, prevState)

所以

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

变成

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

这篇关于React - componentWillReceiveProps 替代方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！