javascript - De ce nu se afișează vizualizarea detaliată?

Am acest cod în fișierul meu Index.tsx care afișează în prezent o listă de Actori. Vreau să arăt detaliile unui actor apăsând pe butonul Detail, dar problema mea este că vizualizarea detaliilor nu se afișează. Poate cineva să mă ajute?

<td>
   <button className="action" onClick={(id) => this.handleDetails(item.Id)}>Detail</button>
</td>

Aceasta apelează această metodă:

handleDetails(id: number) {
    this.renderPopUp();
}

Aceasta apelează această metodă:

private renderPopUp() {
    return <Details id={this.state.activeId} />;
}

Și importă deja asta:

import * as React from 'react'
import {RouteComponentProps} from 'react-router'
import * as models from "../../models"
import * as Modal from 'react-modal'
import { Details } from './Details'

Și, în final, acesta este fișierul meu Details.tsx:

import * as React from 'react'
import { RouteComponentProps } from 'react-router'
import * as models from "../../models"

interface IDetailsState {
    actor: models.Actor;
    loading: boolean,
}

interface IDetailsProps {
    id: number
}

export class Details extends React.Component<IDetailsProps, IDetailsState> {
    constructor(props) {
        super(props);
        this.state = {
            actor: null,
            loading: true
        };
         alert('Hi');//This is not showing
        fetch('api/actors/get/' + this.props.id)
            .then(response => response.json() as Promise<models.Actor>)
            .then(data => {
                this.setState({
                    actor: data,
                    loading: false
                });
            });
    }

    public render() {
        alert('HelloAgain');
        let contents = this.state.loading
            ? <p><em>Loading...</em>
              </p>
            : this.renderDetails(this.state.actor);
        return <div>
                   <h1>Actor Details</h1>
                   {contents}
               </div>;
    }

    private renderDetails(item: models.Actor) {
        return <div className='details'>
                   <label>Id</label>
                   <div>item.Id</div>
                   <label>Name</label>
                   <div>item.Name</div>
                   <label>Gender</label>
                   <div>item.Gender</div>
                   <label>Age</label>
                   <div>item.Age</div>
                   <label>Picture</label>
                   <div>item.Picture</div>
               </div>;
    }
}

Problema principală este că return <Details id={this.state.activeId} />; nu apelează Details.tsx și mă întreb de ce? Am adăugat un alert, alert('Hi'); deasupra fetch și nici acesta nu apare.

Răspuns #1

În sfârșit am înțeles problema. De fapt, nu redai componenta Details. Ea este doar returnată. De aceea nu se afișează. La clic pe buton, starea ar trebui să se schimbe și componenta să fie reafișată cu Details. Atunci va funcționa. Încearcă codul de mai jos în index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Details }  from './details';

interface State {
   id: number;
   renderDetails: boolean;
}

export class Index extends React.Component<any, State> {

constructor(props: any, state: State){
    super(props, state);
    this.state ={
        id: 0,
        renderDetails: false
    }
}
public render() {
    let details = this.state.renderDetails ? <Details id={this.state.id}/> : null;
    return (
        <div>
            <td>
                <button className="action" onClick={this.handleDetails.bind(this, 1)}>Detail</button>
            </td>
            {details}
        </div>
    );
}

private handleDetails(id: number){
    this.setState({
        id: id,
        renderDetails: true
    })

}
}

Răspunsul #2

public componentDidMount() {
  fetch('api/actors/get/' + this.props.id)
            .then(response => response.json() as Promise<models.Actor>)
            .then(data => {
                this.setState({
                    actor: data,
                    loading: false
                });
            });
}

Poate poți încerca să apelezi API-ul tău în interiorul componentDidMount. Te rog să mă anunți. Sunt deschis pentru discuție.