Javascript 在ReactJS中将API数据与this.state映射

如何获得下面的API，以在列表中显示来自JSON的每个

date

和

rate

？我已经浏览了JSON，从我看到的情况来看，我已经正确地映射了它，但是控制台中未定义

{this.state.calendarDay}

，导致

.map

未定义

我错过了什么

import React, { Component } from 'react';

class Rates extends Component {
    constructor(props) {
        super(props);
        this.state = {
            fetched: false,
            isLoaded: false,
            calendarDay: []
        }
    }

    componentWillMount(){
        this.setState({
          loading : true
        });

        const proxyurl = "https://cors-anywhere.herokuapp.com/";
        const url = `//apac.littlehotelier.com/api/v1/properties/chatelainevalleydirect/rates.json`;
        fetch(proxyurl + url).then(res => res.json())
        .then(res =>{
            this.setState({
                calendarDay : res.rate_plans,
                loading : true,
                fetched : true
            });
        });
    }

    render() {
        const {fetched, loading, calendarDay} = this.state;
        let content;
        if(fetched){
          content =
          <ul>
            {calendarDay.rate_plan_dates.map((dailyRates,index) => <li key={index+1}>{dailyRates.date} - ${dailyRates.rate}</li>)}
          </ul>;
        }
        else if(loading && !fetched){
            content = <p> Loading ...</p>;
        }
        else{
          content = <div/>;
        }
        return (
          <div>
            {content}
          </div>
        );
    }
}

export default Rates;

import React，{Component}来自'React'；
类速率扩展组件{
建造师（道具）{
超级（道具）；
此.state={
抓取：假，
isLoaded:false，
日历日：[]
}
}
组件willmount（）{
这是我的国家({
加载：正确
});
常量proxyurl=”https://cors-anywhere.herokuapp.com/";
constURL=`//apac.littlehotelier.com/api/v1/properties/chatelainevalleydirect/rates.json`；
获取（proxyurl+url）。然后（res=>res.json（））
。然后（res=>{
这是我的国家({
日历日：重新评估计划，
加载：对，
抓取：对
});
});
}
render（）{
const{fetched，loading，calendarDay}=this.state；
让内容；
如果（已获取）{
内容=

{calendarDay.rate_plan_dates.map（（DailrRates，index）=>
{DailrRates.date}-${DailrRates.rate}
）}
；
}
else if（加载和获取）{
内容=加载…
；
}
否则{
内容=；
}
返回(
{content}
);
}
}
出口违约率；

您正在使用对象的嵌套数组。这是我提出的一个粗略的解决方案

this.setState({
            calendarDay : res, // change this
            loading : true,
            fetched : true
        });

在渲染函数内部

if(fetched){
      content =
        <div>
            {calendarDay.map((item, k) =>
          <div key={k} >
            {item.rate_plans.map((ratePlans, ratePlanKey)=>
                <ul key={ratePlanKey}>
                    {ratePlans.rate_plan_dates.map((dailyRates,index) => <li key={index+1}>{dailyRates.date} - ${dailyRates.rate}</li>)}
                </ul>
            )}
          </div>
            )}
        </div>
    }

if（已提取）{
内容=
{calendarDay.map（（项，k）=>
{item.rate_plans.map（（ratePlans，ratePlanKey）=>

{ratePlans.rate_plan_dates.map（（DailRates，index）=>
{DailRates.date}-${DailRates.rate}
）}

)}
)}
}

我看到了几个问题

首先，您指定了

calendarDay:[]

是一个数组，同时通过它的属性进行映射，这毫无意义

{calendarDay.rate_plan_dates.map...

因此，它当前看起来像是

array[]。属性始终未定义

由于
calendarDay
是一个数组，因此它没有直接属性
rate\u plans

你的评论之一

当console.log（this.state.calendarDay）放在setState I之后时
get calendarDay未定义。再次为你的帮助干杯-有吗
建议

如果在设置状态后立即放置日志，它将无法按预期工作，因为react中的
state
在异步模式下工作

通过回调验证-

this.setState({
      calendarDay: res,
      loading: true,
      fetched: true
    }, () => console.log(this.state.calendarDay));

如果
它仍然是未定义的，然后
res.rate\u plans
将从服务器发出未定义的消息

否则，请按以下步骤操作：
@Kamran Nazir在他的回答中已经提到

{calendarDay.map((item, k) => <div key={k}>
            {item
              .rate_plans
              .map((ratePlans, ratePlanKey) => <ul key={ratePlanKey}>
                {ratePlans
                  .rate_plan_dates
                  .map((dailyRates, index) => <li key={index + 1}>{dailyRates.date}
                    - ${dailyRates.rate}</li>)}
              </ul>)}
          </div>)}

{calendarDay.map（（项，k）=>
{项目
.收费计划
.map（（ratePlans，ratePlanKey）=>

{费率计划
.费率(计划)(日期)
.map（（dailyRates，index）=>
{dailyRates.date}
-${dailyRates.rate}
）}
）}
)}
在ComponentDidMount中调用api，并且我已经根据计划名称拆分了代码。希望这有帮助

class Rates extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        loading: false,
        calendarDay: []
    }
}

componentDidMount(){
    this.setState({
      loading : true
    });
            var self = this;
    const proxyurl = "https://cors-anywhere.herokuapp.com/";
    const url = `//apac.littlehotelier.com/api/v1/properties/chatelainevalleydirect/rates.json`;
    fetch(proxyurl + url).then(res => res.json())
    .then(res =>{
     console.log(res)
        self.setState({
            calendarDay : res,
            loading : false,
        });
    });
}

render() {

    return (
      <div>
        {this.state.loading &&
            <p>Loading...</p>
        }
        {(this.state.calendarDay.length == 0 && !this.state.loading) && 
            <p>No data Available</p>
        }
        {this.state.calendarDay.length > 0 &&
            <ul>
            {this.state.calendarDay.map(function(i,index){
                return(
                <li key={index}>
                {i.rate_plans.map(function(j,index){
                  return(
                    <ul key={index}> <p>{j.name}</p>
                      {j.rate_plan_dates.map(function(dailyRates,index){
                          return(
                            <li key={index+1}>{dailyRates.date} - ${dailyRates.rate}</li>
                        )
                      })}
                    </ul>
                  )
                })}
                </li>
                )
          })
            }
          </ul>
        }
      </div>
    );
}
}

class.Component{
建造师（道具）{
超级（道具）；
此.state={
加载：false，
日历日：[]
}
}
componentDidMount（）{
这是我的国家({
加载：正确
});
var self=这个；
常量proxyurl=”https://cors-anywhere.herokuapp.com/";
constURL=`//apac.littlehotelier.com/api/v1/properties/chatelainevalleydirect/rates.json`；
获取（proxyurl+url）。然后（res=>res.json（））
。然后（res=>{
console.log（res）
自我状态({
日历日：res，
加载：false，
});
});
}
render（）{
返回(
{this.state.loading&&
加载

}
{（this.state.calendarDay.length==0&&！this.state.loading）&&
没有可用的数据

}
{this.state.calendarDay.length>0&&

{this.state.calendarDay.map（函数（i，索引）{
返回(

{i.rate_plans.map（函数（j，索引）{
返回(
{j.name}

{j.rate\u plan\u dates.map（函数（DailRates，索引）{
返回(
{dailyRates.date}-${dailyRates.rate}
)
})}

)
})}

)
})
}

}
);
}
}
尝试在u
setState
之后立即运行console.log（state.calendarDay）

然后与我们共享数据以获得更好的图片。如果

console.log（this.state.calendarDay）

放置在

setState

I get

calendarDay

未定义之后，请确认。再次为您的帮助干杯-有什么建议吗？回答是数组不反对是的，您是正确的。干杯@charlietfl。谢谢你，卡姆兰。如果答案允许，我会接受的。想知道您是否也可以给出一个指针，将

返回

按其

费率计划

进行拆分？作为

瓦雷纳豪华酒店

和

周末度假酒店

，

费率计划

阵列包含3个