Javascript 如何在React中将异步道具从父组件传递到子组件

想象一下下面在React中的简单场景：

在本例中，我们有一个单亲组件和一个子组件。当父组件开始实例化时，它需要发出请求以获取childId。请求可能是异步的，也可能不是异步的。在我的特殊情况下，我用的是电子

在父id检索到childId之后，我想将该childId作为一个道具传递给子组件，然后子组件发出另一个请求来检索它自己的状态

这是我想要实现的功能。在过去的几个小时里，我一直在努力解决的问题是如何找回孩子。不幸的是，React在父组件检索childId之前创建子组件。因此，子组件无法检索它自己的状态

我想看看是否有办法延迟子组件的渲染，直到父组件检索到childId

父组件

子组件

谢谢， Ruben

假设您的ticketId在加载之前始终为0，则您可以在ticketId为0时显示替代/加载内容：

---

你能给这个问题添加一个代码示例，这样我们就可以帮助解决问题了吗？嘿，尼克，添加了代码示例。那么ticketId在呈现孩子之前你在等什么呢？是的，没错。在我的用例中，我希望父组件aka TicketOrchestrator获取ticketId，然后呈现子组件aka Ticket。这样，当票证组件呈现时，它已经有一个有效的TicketId，可用于从某个后端服务检索自身。好的，因此在调用呈现函数之前，您不知道在父组件中检索TicketId的任何类型的方法。如果我能阻止整个孩子的渲染，直到我有了一个有效的道具，我会觉得更干净。哦，呜呜，我刚才注意到这是在父组件中。杰出的这似乎是我想要的。谢谢

interface IState {
ticketId: number;
}

export class TicketOrchestrator extends React.Component<{}, IState> {
    public state: IState = {
        ticketId:0
    };

public render(): React.ReactNode {
    const onPrevious = () => console.log("FromPrevious");
    const onNext = () => console.log("FromNext");
    return (
    <div> 
        <Ticket ticketId={this.state.ticketId} previous={onPrevious} next={onNext}/>
    </div>
    );
}

public componentDidMount(): void {
    ipcRenderer.on("ticketOrchestrator", this.onMessage);
}

public componentWillUnmount(): void {
    ipcRenderer.removeAllListeners("ticketOrchestrator");
}

private onMessage = (event: any, ticketId: any) => {
    console.log("TicketId", ticketId);
    this.setState({ ticketId: ticketId });
};
}

interface IState{
    id: number,
    header: {
        ticketNumber: string,
        title: string,
        date: Date
    },
    body: {
        content: string,
    }
}

interface IProps{
    ticketId: number,
    previous: any,
    next: any
}

export class Ticket extends React.Component<IProps, IState> {
    public state:IState = {
        id: this.props.ticketId,
        header: {
            ticketNumber: "",
            title: "",
            date: new Date()
        },
        body: {
            content: "",
        }
    };

public render(): React.ReactNode {
    const handleClickNext = () => this.props.previous();
    const handleClickPrevious = () => this.props.next();
    return (
    <div>
        <button onClick= {handleClickPrevious} >Previous</button>
        <button onClick= {handleClickNext}>Next</button>
        <div>
            <h2>{this.state.header.title}</h2>
            <h4>{this.state.header.date.toLocaleTimeString()}</h4>
        </div>
        <div>
            <p>{this.state.body.content}</p>
            <p>Id: {this.state.id}</p>
        </div>
    </div>
    );
  }
};

<div>
  {this.state.ticketId === 0 ? (
    <>Loading...</>
  ) : (
    <Ticket
      ticketId={this.state.ticketId}
      previous={onPrevious}
      next={onNext}
    />
  )}
</div>;