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

我有一个包含多个组件的视图

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

class ProfileView扩展了React.compent{
构造函数（）{
超级（）；
此.state={
用户：{}
}
}
组件willmount（）{
获取数据（（分辨率）=>{
this.setState（{user:res}）；
})
}
render（）{
返回(
)
}
}

因为这是在进行异步调用，并在初始redner上将状态呈现为空对象，所以这会导致我认为是个问题吗

在我的内部组件中，我必须编写验证，这是可以的，但感觉是错误的，这就是为什么我要问这个问题，下面的示例中的验证是良好实践还是我犯了错误

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

class SomeComponent扩展了React.component{
render（）{
if（this.props.user！='undefined'&&&！$.isEmptyObject（this.props.user））的类型{
返回(
)
}否则{
返回(
)
}
}
}

这是我能想到的最好的，它工作正常，但在我的UI中有一个轻微的跳跃，因为最初我只是渲染一个

---

我该如何改进我的方法，或者这是一种理想的方法吗？

您的实现接近于我将要做的。我认为最好的解决方案是首先呈现一个组件，该组件向用户指示正在从服务器获取数据。一旦数据返回，您就可以更新父组件的状态，这将替换要渲染的子组件。可能的解决方案可能如下所示：

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

函数renderChildComponent（）{
const{user}=this.state；
如果（用户）{
返回；
}
返回；
}
导出默认类父级扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户：未定义
};
}
componentDidMount（）{
获取数据（响应=>{
this.setState（{user:response}）；
});
}
render（）{
返回(
{renderChildComponent.call（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>
        );
    }
}

函数renderChildComponent（）{
const{user}=this.state；
如果（用户）{
返回；
}
返回；
}
导出默认类父级扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户：未定义
};
}
componentDidMount（）{
获取数据（响应=>{
this.setState（{user:response}）；
});
}
render（）{
返回(
{renderChildComponent.call（this）}
);
}
}

当数据未准备好时，只需将父组件更改为不渲染

SomeComponent

。将道具传递给子组件是正确的方法。代码看起来不错。您可以使用骨架组件。当道具未定义时，只显示骨架，当抓取完成时，显示数据。这样会更方便用户。只需将父组件更改为在数据未准备好时不渲染

SomeComponent

。将道具传递给子组件是正确的方法。代码看起来不错。您可以使用骨架组件。当道具未定义时，只显示骨架，当抓取完成时，显示数据。这样会更方便用户。或者将

renderChildComponent（）

放在父组件中，像

{This.renderChildComponent（）}

一样调用它。是的，两者都是有效选项，但这样做会使该函数从组件类公开访问-可以将该组件导入另一个文件中，像这样实例化组件：

constparentcomponent=React.createElement（父级），并像调用parentComponent.renderChildComponent（）那样调用该函数。由于实际上没有理由公开访问此函数，因此可能会出现错误，不这样做。renderChildComponent代码可能在render中。代码更具可读性。我不同意在
render
函数中它会更具可读性，但每个函数都有自己的可读性。或者将
renderChildComponent（）
放在父组件中，像
{this.renderChildComponent（）}
一样调用它。是的，这两个选项都是有效的，但是这样做将使该函数可以从组件类公开访问-可以在另一个文件中导入该组件，像这样实例化该组件：
constparentcomponent=React.createElement（Parent），并像调用parentComponent.renderChildComponent（）那样调用该函数。由于实际上没有理由公开访问此函数，因此可能会出现错误，不这样做。renderChildComponent代码可能在render中。代码更具可读性。我不同意在
render
函数中它更具可读性，但每个函数都有自己的可读性。