Question

我在使用样本数据为组件提供问题时遇到了一些问题。我创建了一个web api方法，它返回一些json对象：

[ {＆＃34; id＆＃34;：1，＆＃34; title＆＃34;：＆＃34; Master framework＆＃34;，＆＃34; description＆＃34;：＆＃34;开发高级UI的框架现代网络应用程序的界面＆＃34;，＆＃34;状态＆＃34;：＆＃34;进行中＆＃34;，＆＃34;颜色＆＃34;：＆＃34;＃3A7E26＆＃34;}， {＆＃34; id＆＃34;：2，＆＃34;标题＆＃34;：＆＃34;设置主应用解决方案＆＃34;，＆＃34;说明＆＃34;：＆＃34;应用＆＃34 34;，＆＃34;状态＆＃34;：＆＃34;待办事项＆＃34;＆＃34;颜色＆＃34;：＆＃34;＃3A7E26＆＃34;}， {＆＃34; id＆＃34;：3，＆＃34; title＆＃34;：＆＃34; UI模拟创建＆＃34;，＆＃34;描述＆＃34;：＆＃34;必须整洁简单＆＃34;＆＃34;状态＆＃34;：＆＃34;待办事项＆＃34;＆＃34;颜色＆＃34;：＆＃34;＃BD8D31＆＃34;}， {＆＃34; id＆＃34;：4，＆＃34; title＆＃34;：＆＃34; WebAPI实施＆＃34;，＆＃34;说明＆＃34;：＆＃34;基于REST架构＆＃34; ;，＆＃34;状态＆＃34;：＆＃34;待办事项＆＃34;＆＃34;颜色＆＃34;：＆＃34;＃BD8D31＆＃34;} ]

我的组件：控制板：

interface IDashboardState {
    Cards: Card[];
}

export class Dashboard extends React.Component<RouteComponentProps<{}>, IDashboardState> {
    constructor() {
            super();
            this.state = { Cards: [] };
    }

    public componentDidMount() {

        const baseUrl = 'http://localhost:51429/Home/Cards';
        var cardEntities: CardEntity[];

        fetch(baseUrl)
            .then((response) => (response.json())
                .then((responseData) => {
                    console.log(responseData.length);
                    this.setState({ Cards: responseData })
                })
                .catch((error) => {
                    console.log("Error loading data", error);
                }));

    }

    render() {
        return (
            <div className="app">
                <List Id='todo' Title="To do" Cards={
                    this.state.Cards.filter((card) => card.props.Status === "todo")}
                     />
                <List Id='in-progress' Title="In progress" Cards={
                    this.state.Cards.filter((card) => card.props.Status === "in-progress")}
                     />
                <List Id='done' Title="Done" Cards={
                    this.state.Cards.filter((card) => card.props.Status === "done")}
                     />
            </div>
        );
    }
}

列表：

interface IListProps {
    Id: string;
    Title: string;
    Cards: Card[];
}
export class List extends React.Component<IListProps, {}> {
    render() {
        var cards = this.props.Cards.map((card => {
            return <Card key={card.props.Id}
                Id={card.props.Id}
                Title={card.props.Title}
                Description={card.props.Description}
                Status={card.props.Status}
                Color={card.props.Color}
                />
        }))

        return (
            <div className="list">
                <h1>{this.props.Title}</h1>
                {cards}
            </div>
        );
    }
}

卡：

interface ICardProps {
    Id: number;
    Title: string;
    Description: string;
    Status: string;
    Color: string;
}

interface ICardState {
    showDetails: boolean;
}


export class Card extends React.Component<ICardProps, ICardState> {
    constructor(props: ICardProps) {
        super(props)
            this.state = {
        showDetails: false
    };
}

toggleDetails() {
    this.setState({showDetails: ! this.state.showDetails})
}

render() {

    let cardDetails;
    if (this.state.showDetails) {
        cardDetails = (
            <div className="card_details">
                <CheckList CardId={this.props.Id}

                />
            </div>
        );
    }

    return (
        <div className="card">
            <div>
                <div className="card_title" onClick={this.toggleDetails.bind(this)}>
                    {this.props.Title}
                </div>
                <div className="card_description">
                    {this.props.Description}
                </div>
                {cardDetails}
            </div>
        </div>
    );
}

我认为在获取时会做出反应会自动将我的json分配给Card对象，但它会将它们保留为未定义且不会呈现任何内容。有什么想法吗？

提前感谢您的帮助！

Answer 1

响应数据未正确映射到道具。

控制台

interface IListProps {
  Id: string;
  Title: string;
  Cards: Card[];
}

export class List extends React.Component<IListProps, {}> {
  render() {
    var cards = this.props.Cards.map(card => {
      return
        <Card key={card.id}
          Id={card.id}
          Title={card.title}
          Description={card.description}
          Status={card.status}
          Color={card.color}
        />
    })

    return (
      <div className="list">
        <h1>{this.props.Title}</h1>
        {cards}
      </div>
    );
  }
}

列表

{{1}}

Typescript反应提取未定义的对象

1 个答案:

控制台

列表