Reactjs Typescript获取未定义的对象_Reactjs_Typescript

Reactjs Typescript获取未定义的对象

reactjs typescript

Reactjs Typescript获取未定义的对象,reactjs,typescript,Reactjs,Typescript,向组件提供示例数据时遇到了一些问题。我创建了一个返回一些json对象的web api方法： [ {“id”：1，“标题”：“主框架”，“描述”：“为现代web应用程序开发高级UI界面的框架”，“状态”：“进行中”，“颜色”：“#3A7E26”}， {“id”：2，“title”：“Setup main app solution”，“description”：“An app”，“status”：“todo”，“color”：“#3A7E26”}， {“id”：3，“标题”：“UI模拟创建”，“描述

向组件提供示例数据时遇到了一些问题。我创建了一个返回一些json对象的web api方法：

[ {“id”：1，“标题”：“主框架”，“描述”：“为现代web应用程序开发高级UI界面的框架”，“状态”：“进行中”，“颜色”：“#3A7E26”}， {“id”：2，“title”：“Setup main app solution”，“description”：“An app”，“status”：“todo”，“color”：“#3A7E26”}， {“id”：3，“标题”：“UI模拟创建”，“描述”：“必须整洁简单”，“状态”：“todo”，“颜色”：“#BD8D31”}， {“id”：4，“title”：“WebAPI实现”，“description”：“基于REST架构”，“status”：“todo”，“color”：“#BD8D31”} ]

我的组件：仪表板：

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

接口状态{
卡片：卡片[]；
}
导出类仪表板扩展了React.Component{
构造函数（）{
超级（）；
this.state={Cards:[]}；
}
公共组件didmount（）{
常量baseUrl=http://localhost:51429/Home/Cards';
var信用卡实体：信用卡实体[]；
获取（baseUrl）
.然后（（response）=>（response.json（））
.然后（（响应数据）=>{
控制台日志（响应数据长度）；
this.setState（{Cards:responseData}）
})
.catch（（错误）=>{
日志（“加载数据错误”，错误）；
}));
}
render（）{
返回(
card.props.Status==“待办事项”）}
/>
card.props.Status==“正在进行”）}
/>
card.props.Status==“完成”）}
/>
);
}
}

名单：

接口操作{
Id：字符串；
标题：字符串；
卡片：卡片[]；
}
导出类列表扩展了React.Component{
render（）{
var cards=this.props.cards.map（（卡片=>{
返回
}))
返回(
{this.props.Title}
{卡片}
);
}
}

卡片：

接口ICardProps{
Id：编号；
标题：字符串；
描述：字符串；
状态：字符串；
颜色：字符串；
}
接口ICardState{
showDetails：布尔值；
}
导出类卡扩展React.Component{
构造器（道具：ICardProps）{
超级（道具）
此.state={
showDetails:错误
};
}
toggleDetails（）{
this.setState（{showDetails:！this.state.showDetails}）
}
render（）{
让我们看看细节；
if（this.state.showDetails）{
卡片详细信息=(
);
}
返回(
{this.props.Title}
{this.props.Description}
{cardDetails}
);
}

我以为在抓取时react会自动将我的json分配给Card对象，但这会使它们处于未定义状态，并且不会呈现任何内容。你知道为什么吗

提前感谢您的帮助！

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

仪表板

接口数据{
id：字符串；
标题：字符串；
描述：字符串；
状态：字符串；
颜色：字符串；
}
接口状态{
卡片：CardData[]；
}
导出类仪表板扩展了React.Component{
构造函数（）{
超级（）；
this.state={cards:[]}；
}
公共组件didmount（）{
常量baseUrl=http://localhost:51429/Home/Cards';
var信用卡实体：信用卡实体[]；
获取（baseUrl）
.然后（（response）=>（response.json（））
.然后（（响应数据）=>{
控制台日志（响应数据长度）；
this.setState（{cards:responseData as CardData[]}）
})
.catch（（错误）=>{
日志（“加载数据错误”，错误）；
}));
}
render（）{
返回(
card.status==“待办事项”）}
/>
card.status==“正在进行”）}
/>
card.status==“完成”）}
/>
);
}
}

列表

接口操作{
Id：字符串；
标题：字符串；
卡片：卡片[]；
}
导出类列表扩展了React.Component{
render（）{
var cards=this.props.cards.map（card=>{
返回
})
返回(
{this.props.Title}
{卡片}
);
}
}

更新您的

过滤器

调用

过滤器（card=>card.status==“todo”）

和

列表中的映射

渲染为

Title={card.Title}

在Dashboard render（）函数中，我不能从card.props.status更改为card.status，因为子组件接受了一个card对象（已经是react组件类扩展）您的

仪表板状态属性卡应该具有数组的形状，其中包含类似JSON响应的对象。将其命名为CardData
，这样您就不会将其与卡组件混淆。希望这一点很清楚。仍然不会呈现卡组件
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>
    );
}

interface CardData {
  id: string;
  title: string;
  description: string;
  status: string;
  color: string;
}

interface IDashboardState {
  cards: CardData[];
}

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 as CardData[] })
        })
        .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.status === "todo")}
        />
        <List Id='in-progress' Title="In progress" Cards={
          this.state.cards.filter((card) => card.status === "in-progress")}
        />
        <List Id='done' Title="Done" Cards={
          this.state.cards.filter((card) => card.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.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>
    );
  }
}