Question

我的视图包含多个组件。

post

由于这是在进行异步调用并将状态渲染为初始redner上的空对象，因此导致我认为是一个问题？

在我的内部组件内部，我必须编写验证，这是好的，但感觉不对，这就是为什么我问这个问题，下面的例子中的验证是好的做法还是我犯了错误。

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

这是我能想到的最好的，它运作正常，但我的UI略有跳跃，因为最初我只是渲染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> ) } } }。

如何改进我的方法，或者这是理想的做法？

Answer 1

您的实施与我的工作非常接近。我认为最好的解决方案是最初渲染一个组件，向用户指示从服务器获取数据。一旦该数据返回，您就可以更新父组件的状态，这将改变子组件的呈现方式。潜在的解决方案可能如下所示：

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

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

1 个答案: