Reactjs 反应-组件将接受道具替代方案

我使用React with NextJS

我有一个组件，它基本上是一个表，给出了一些总结。 根据一些UI选择，该组件将显示适当的摘要

下面的代码工作得非常好

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

类摘要扩展组件{
状态={
总数：0，
通过:0,，
失败：0，
护照号码：0，
失败：0
}
组件将接收道具（道具）{
让总数=props.results.length；
let pass=props.results.filter（r=>r.status==“pass”）.length；
让失败=全部通过；
设passp=（pass/（total | | 1）*100）。toFixed（2）；
设failp=（fail/（total | 1）*100）.toFixed（2）；
这个.setState（{total，pass，fail，passp，failp}）；
}
render（）{
返回(
全部的
通过
失败
及格%
失败%
{this.state.total}
{this.state.pass}
{this.state.fail}
{this.state.passp}
{this.state.failp}
);
}
}

看起来，

组件将接收道具

将被弃用。我尝试了其他选项，如

shouldComponentUpdate

等。它们都会导致无限循环。更新道具状态以重新呈现此组件的最佳方法是什么？

从react，16.3引入了

组件的弃用通知将接收道具

作为一种变通方法，您可以使用

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
}

静态getDerivedStateFromProps（下一步，上一步）{
如果（nextrops.total！==prevState.total）{
返回（{total:nextrops.total}）//componentWillReceiveProps将被弃用？您使用的是React17吗？上面的脚本中没有导致无穷大错误的代码loop@RIYAJKHAN正如我所说，它将被弃用。而且这个组件工作得很好。我正在寻找alternative@DenisTsoigetDerivedStateFromProps是静态的。我无法调用
setState
您可以查看answer查看如何使用
getDerivedState
设置状态-React建议，如果需要执行副作用（例如，数据获取或动画），请使用getDerivedStateFromProps的componentDidUpdate isnTed为了响应props中的更改，@user1912383不必使用componentDidUpdate，这取决于具体情况，react建议getDerivedStateFromProps备选方案：并添加：else返回nullYes忘记else将导致在getDerivedStateFromProps方法内设置状态（如果它是异步的）时出现一些错误