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，我想知道为什么？我在alert('Hi');之上添加了一个提醒fetch，但也没有显示。

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

heroku deploy:jar <filename>.jar --app <appname>

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

为什么详细信息视图未显示？

2 个答案: