Question

我对目前遇到的情况有疑问。尽管我找到了解决方法，但我认为这不是最佳实践。我的组件要做的第一件事是调用API，并将结果发送到this.props。接下来，我将基于这些道具进行条件检查。这就是问题所在，该组件多次渲染（4），并且被调用的prop是来自先前状态的prop。因此，我必须等待第二次渲染才能继续。这是我的解决方法的布局。

import React from 'react'

class TestComponent extends React.Component{
    componentDidMount(){
      api = this.make.apiCall()
         }
    render(){
        let something = null
        console.log('Render Test Comp')

        if(this.props){
            something = (
                <div>this.props Exsists</div>
            )
        }

        return(
            <React.Fragment>
            {something}
            </React.Fragment>
        )
    }
}
export default TestComponent

所以基本上我想知道的是，捕获页面的LAST渲染的最佳方法是什么？我上面的方法可以吗？有没有更好的办法？我是否应该在JSX内联插入条件语句（如果您在JSX内嵌套了条件语句，我认为它是如此丑陋且令人困惑）？大家都很开心，而且总是回答我的问题，这些问题要具体得多。这应该很容易;）

Answer 1

在这里我无法回答您的问题，因为代码在很多方面都是错误的。另外，您的代码段与解释没有任何意义。

问题1：

api = this.make.apiCall()

this.make.apiCal()在哪里？期望得到什么回应？
api应该是一种状态。为了重新渲染您的组件，因为api调用中发生了更改。

问题2：

if(this.props){
  something = (
     <div>this.props Exsists</div>
  )
}

这是绝对错误的，因为这种情况总是会被触发。 this.props为{}，即为真实值的空对象。

参见塔尔西·萨普柯塔（ Hello World in React）的钢笔@tolsee 在CodePen上。

在React Component中捕获最后一个渲染的最佳实践

1 个答案: