为什么没有显示详细视图？

Question

我的Index.tsx 文件中有这段代码，当前显示Actors 的列表。我想通过点击Detail 按钮来显示演员的详细信息，但我的问题是没有显示详细信息视图。有人可以帮忙吗？：

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

调用这个方法：

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

调用这个方法：

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

并且已经导入了这个：

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'

最后这是我的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>;
    }
}

主要问题是return <Details id={this.state.activeId} />; 没有调用Details.tsx，我想知道为什么？我在fetch 上方添加了一个警报alert('Hi');，但它也没有显示。

Answer 1

终于找到问题了。您实际上并没有渲染Details 组件。它只是被返回。这就是为什么它没有被渲染。应更改按钮单击状态并使用Details 重新呈现组件。然后，它应该工作。 在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
    })

}
}

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

也许您可以尝试在 componentDidMount 中调用 API 调用。 请告诉我。开放讨论。