Question

鉴于我的代码：

class Example extends Components {
  constructor(props) {
     super(props)
  }

  componentDidMount() {
     //fetch data
  }

  render() {
     const {obj} = this.props;
     if(R.isEmpty(obj)) {
        return null;
     }

     return (<div>{obj.name}</div>)
  }
}

从服务器检索obj。因此，对于初始渲染，obj为空。如果我没有返回null，obj.name将报告错误

在我收到服务器响应之前返回null是一个好习惯吗？感谢

Answer 1

是的，这是正确的方法。如果不想render任何return null。

如果你想等到response并按住rendering，那么还有一件事，你也可以return：

if(R.isEmpty(obj)) {
    return <div>Loading...</div>
}

通过这种方式，用户将会知道某些事情正在发生，某些数据正在从server获取，我认为这更直观。

Answer 2

所以在我收到回复之前返回null是一个好习惯服务器？

可以这样做，但也取决于具体情况。例如，在某些情况下，您可以完全避免渲染组件：

class ParentComp extends Component {
  render() {
    return (
      <div>
        {!R.isEmpty(obj) && <Example obj={obj}/>}
      </div>
    );
  }
}

在React中，如果props为空，返回null是一个好习惯

2 个答案: