Question

我有一个父组件和子组件。在父组件中，我有一个名称和电话号码的表单，当我按下提交时，我希望父组件将这些值作为道具传递给子。

在子组件中我使用道具并进行ajax调用，然后想要将结果显示为表格下方的表格

所以最初我只想要显示表单但是当我输入值并按下回车时我希望表格显示在表格下面

那么在ajax完成之前，如何停止渲染子组件？

我的子组件代码是

    class List extends React.Component{

    constructor(props) {
        super(props);
        this.state = {

          page: ''
        };

    getPageInfo(info)
    {

        var self=this;

        var dataHasChanged = (this.props.info !== info)

        if ( dataHasChanged ) {
            this.setState({page: ''});

            //some ajax .done(function(data){

                if ( self.props.info === info ) {
                        self.setState({
                          page: data    });
                }

            });
        }
    }

    componentWillMount(){
        this.getPageInfo(this.props.info);
      }

    componentWillReceiveProps(nextProps){
        this.getPageInfo(nextProps.info);
      }


    render(){
    //something 
    }

   }

Answer 1

您需要一个条件渲染。换句话说，检查组件状态中的某些值（可能是this.state.page）..如果它不存在（还），则不渲染任何内容，或者某种“加载”图像或文本。然后，当它在那里时，你可以渲染你想要的数据。

类似的东西：

render() {
    return (
        <div>
        {this.state.page ? 
            <div>{this.state.page.somedata}</div>
        :
            <div>Loading...</div>}
        </div>
    );
}

甚至：

render() {
    if (!this.state.page) {
        return <div>Loading...</div>
    }
    return (
        <div>
            <div>{this.state.page.somedata}</div>
        </div>
    )

}

Answer 2

如果你在父组件中发出ajax请求，你可以告诉React如果所需的数据没有准备好就不呈现表：

render() {

  const table;
  if (this.state.data) table = <table data=this.state.data />;

  return table;
}

查看代码的注释：永远不会：

this.setState({ foo: '' });
this.setState({ foo: 1 });

setState是异步的，因此您最终可能会foo取代''而不是1

如何在reactjs中完成ajax调用之前停止渲染组件

2 个答案: