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

Question

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

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

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

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

我想看看是否有一种方法可以延迟子组件的渲染，直到父组件检索到 childId。

父组件

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

谢谢， 鲁本

Answer 1

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

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