反应获取数据然后作为道具传递？

Question

I have a view that contains several components.

class ProfileView extends React.Compnent {
  constructor() {
    super();
    this.state = {
      user: {}
    }
  }
  componentWillMount() {
    fetchData((res) => {
      this.setState({user: res});
    })
  }
  render() {
    return (
      <div>
        <SomeComponent user={this.state.user} />
        <AnotherComponent />
      </div>
    )
  }
}

Since this is making an async call and rendering the state as an empty object on the initial redner, it's causing what I think to be a problem?

Inside my inner component I have to write validation, which is ok but feels wrong, that is why I am asking this question, is the validation in the example below good practice or am I making a mistake.

class SomeComponent extends React.Compnent {
  render() {
    if(typeof this.props.user !== 'undefined' && !$.isEmptyObject(this.props.user)) {
      return (
        <div>
          <SomeComponent user={this.state.user} />
          <AnotherComponent />
        </div>
      )
    } else {
      return (
        <div></div>
      )
    }
  }
}

This is the best I could come up with, it works ok but there is a slight jump in my UI because initially I am just rendering a <div> .

How can I improve my approach, or is this the ideal way to do it?

Answer 1

Your implementation is close to what I would do. I think that the best solution is to initially render a component that indicates to the user that data is being fetched from the server. Once that data comes back, you can update the state of your parent component, which will case the child component to render instead. A potential solution might look something like this:

function renderChildComponent() {
    const {user} = this.state;

    if (user) {
        return <Child user={user} />;
    }

    return <Loading />;
}

export default class Parent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            user: undefined
        };

    }

    componentDidMount() {
        fetchData(response => {
            this.setState({user: response});
        });
    }

    render() {
        return (
            <div>
                {renderChildComponent.call(this)}
            </div>
        );
    }
}